Android 正 N 边形圆角头像的实现

于 2024-08-11 18:30:24 发布
阅读量342 收藏 7
点赞数 4
文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_85833902/article/details/141109423
版权

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“circle”

/>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

指定圆角矩形

<com.xj.shapeview.MultiImageView

android:layout_marginLeft=“15dp”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“round”

app:miv_corner_radius=“15dp”/>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

指定正 N 边形

正五边形

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“polygon”

app:miv_sides=“5”

app:miv_corner_radius=“25dp”/>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果需要其旋转相应的角度，我们只需指定 app:miv_rotate_angle=“180” 即可，这里以 180 度为列子讲解说明

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

如果需要正六边形，只需要更改为 app:miv_sides=“6”

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

效果图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

相应的布局文件实现

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

xmlns:tools=“http://schemas.android.com/tools”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<GridLayout

android:columnCount=“3”

android:rowCount=“3”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“circle”

app:miv_sides=“6”

app:miv_corner_radius=“15dp”/>

<com.xj.shapeview.MultiImageView

android:layout_marginLeft=“15dp”

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“5”

app:type=“round”

app:miv_corner_radius=“15dp”/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“polygon”

app:miv_sides=“5”

app:miv_corner_radius=“25dp”/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:type=“polygon”

app:miv_sides=“5”

app:miv_corner_radius=“25dp”

app:miv_rotate_angle=“180”/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“7”

app:type=“polygon”

app:miv_corner_radius=“0dp”

app:miv_rotate_angle=“0”/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“6”

app:type=“polygon”

app:miv_corner_radius=“0dp”

app:miv_border_overlay=“true”

app:miv_fill_color=“@color/colorAccent”/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“6”

app:type=“polygon”

app:miv_corner_radius=“0dp”

app:miv_rotate_angle=“0”

app:miv_border_overlay=“true”

app:miv_border_width=“1dp”

app:miv_border_color=“@android:color/darker_gray”

/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“6”

app:type=“polygon”

app:miv_corner_radius=“0dp”

app:miv_rotate_angle=“0”

app:miv_border_overlay=“false”

app:miv_border_width=“1dp”

app:miv_border_color=“@android:color/black”

/>

<com.xj.shapeview.MultiImageView

android:layout_width=“100dp”

android:layout_height=“100dp”

android:src=“@mipmap/tanyan”

app:miv_sides=“7”

app:type=“polygon”

app:miv_corner_radius=“10dp”

app:miv_rotate_angle=“0”

/>

正 N 边形圆角头像的实现原理分析

本文已被开源项目：【一线大厂面试真题解析+核心总结学习笔记+最新全套讲解视频+实战项目源码讲义】收录

要实现正 N 变形主要有几个难点

  • 怎样让我们的头像变成正 N 边形

  • 怎样绘制正 N 边形

  • 怎样绘制带圆角的正 N 边形

怎样让我们的头像变成正 N 边形？

其实这个问题在上篇博客已经讲到，有两种实现方式。

  • 第一种： 使用 Paint 的 Xfermode 实战

  • 第二种： 使用 BitmapShader 实现

今天，这边博客主要以 BitmapShader 为例子实现。

核心代码实现

mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

mBitmapPaint.setAntiAlias(true);

mBitmapPaint.setShader(mBitmapShader);

@Override

protected void onDraw(Canvas canvas) {

Path path = getPath(canvas,mType,(int)mDrawableRadius2,(int)mDrawableRadius2,mDrawableRadius,mSides,mCornerRadius);

canvas.drawPath(path,mBitmapPaint);

}

核心思路分析：

  • 拿到 Bitmap，并使用 BitmapShader 进行包装

  • 将 mBitmapShader 设置给画笔 Paint

  • 第三步，在 onDraw 方法，将其绘制出来

怎样绘制正 N 边形

这里的思想主要来自该博客 如何用Canvas画一个正多边形

数学原理分析

首先，我们先来看一张图片

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

从图中可以看一看到，我们若想绘制出一个正 N 边形，那么我们只需要计算出各个点的坐标，然后使用 Path 连接起来即可。

那我们要怎样计算出各个点的坐标呢

  • 从图中不难得出，圆心角 a 的度数为 360/n，弧度计算为 2π/n

  • 如果把圆心的坐标为(0,0)，那么顶点P1的坐标为[X1=cos(a),Y1=sin(a)]。

  • 以此类推，顶点Pn坐标为[Xn=cos(a_n),Yn=sin(a_n)]。

圆心的实际坐标是外接矩形的中心：[Ox=(rect.right+rect.left)/2 , Oy=(rect.top+rect.bottom)/2]。

所以Pn的实际坐标是[Xn+Ox,Yn+Oy]。

最后我们把把 P0-P1…Pn 连起来，就是我们要的结果了。

核心伪代码实现

float a = 2π / n ; // 角度

Path path = new Path();

for( int i = 0; i < = n; i++ ){

float x = R * cos(a * i);

float y = R * sin(a * i);

if (i = 0){

path.moveTo(x,y); // 移动到第一个顶点

}else{

path.lineTo(x,y); //

}

}

drawPath(path);

实际代码实现

在上面的例子中，我们假设我们的圆形坐标是 (0,0), 但实际上并不是，实际上在 Android 中我们的圆心坐标是 (width/2,height/2)。因此，我们在计算坐标的时候需要加上

圆心坐标

float mX = (rect.right + rect.left) / 2;

float my = (rect.top + rect.bottom) / 2;

// PN点的 x，y 坐标

float nextX = mX + Double.valueOf(r * Math.cos(alpha)).floatValue();

float nextY = my + Double.valueOf(r * Math.sin(alpha)).floatValue();

当然我们这里以可以用 canvas 的 translate 方法来移动。

public static void drawPolygon (RectF rect, Canvas canvas, Paint paintByLevel, int number) {

if(number < 3) {

return;

}

float r = (rect.right - rect.left) / 2;

float mX = (rect.right + rect.left) / 2;

float my = (rect.top + rect.bottom) / 2;

Path path = new Path();

for (int i = 0; i <= number; i++) {

// - 0.5 : Turn 90 ° counterclockwise

float alpha = Double.valueOf(((2f / number) * i - 0.5) * Math.PI).floatValue();

float nextX = mX + Double.valueOf(r * Math.cos(alpha)).floatValue();

float nextY = my + Double.valueOf(r * Math.sin(alpha)).floatValue();

if (i == 0) {

path.moveTo(nextX, nextY);

} else {

path.lineTo(nextX, nextY);

}

}

canvas.drawPath(path, paintByLevel);

}

怎样绘制带有圆角的正 N 边形

这个问题我一开始的思路是根据圆形的半径，然后计算出各个点的坐标，接着使用 path 中的 addArc() 方法来绘制。但是在计算各个点的坐标的时候，遇到很多难度，最后无法得出。

后面查阅了 Android 官方的文档，发现了有这样一个方法

PathEffect setPathEffect (PathEffect effect)

从字面意思很容易理解，就是设置 PathEffect，可以对 Path 产生相应的影响。

那这个 PathEffect 又是什么东东呢？

public class PathEffect extends Object

Known Direct Subclasses

ComposePathEffect,CornerPathEffect,DashPathEffect,DiscretePathEffect,PathDashPathEffect,SumPathEffect

从官方文档可以了解到是继承于 Object 的，实现的子类有 ComposePathEffect， CornerPathEffect， DashPathEffect 等。

看到这里的时候你有没有突然有一种醍醐灌顶的感觉？ 这个 CornerPathEffect 是不是就可以实现呢？没错，确实可以实现，而且贼简单。

核心代码只有这几句，就可以让我们绘制出的正 N 边形具有圆角

CornerPathEffect cornerPathEffect = new CornerPathEffect(mCornerRadius);

mBitmapPaint.setPathEffect(cornerPathEffect);

代码实现细节注意事项

当空间的宽度和高度不一致的时候，半径怎样取值？

这里我们选择宽度和高度值较小的一个，然后除以2

mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);

当图片较大的时候，会不会发生 OOM

最后

一线互联网Android面试题含详解（初级到高级专题）

这些题目是今年群友去腾讯、百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。并且大多数都整理了答案，熟悉这些知识点会大大增加通过前两轮技术面试的几率

如果设置门槛，很多开发者朋友会因此错过这套高级架构资料，错过提升成为架构师的可能。这就失去了我们的初衷；让更多人都能通过高效高质量的学习，提升自己的技术和格局，升职加薪。

最后送给大家一句话，望共勉，永远不要放弃自己的梦想和追求；

tps://docs.qq.com/doc/DSkNLaERkbnFoS0ZF)代码实现细节注意事项

当空间的宽度和高度不一致的时候，半径怎样取值？

这里我们选择宽度和高度值较小的一个，然后除以2

mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);

当图片较大的时候，会不会发生 OOM

最后

一线互联网Android面试题含详解（初级到高级专题）

这些题目是今年群友去腾讯、百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。并且大多数都整理了答案，熟悉这些知识点会大大增加通过前两轮技术面试的几率

[外链图片转存中…(img-JV3XWOK5-1723372214147)]

如果设置门槛，很多开发者朋友会因此错过这套高级架构资料，错过提升成为架构师的可能。这就失去了我们的初衷；让更多人都能通过高效高质量的学习，提升自己的技术和格局，升职加薪。

最后送给大家一句话，望共勉，永远不要放弃自己的梦想和追求；

本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录

2401_85833902
关注
uniapp [全端兼容] - 详细实现头像裁剪功能，用户手机拍照或本机相册选取后对图片进行裁剪上传头像，选择图像裁剪后设置成头像效果，选择头像后对图片进行裁剪调整，最强头像裁剪插件组件全平台通用组件
王佳斌
07-06 2495
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，头像裁剪，图片裁剪，头像裁切，图像裁剪，上传图片前裁剪功能，实现图片头像裁剪，小程序头像裁剪上传，裁剪后生成临时文件上传到服务器，头像修改，如何在uniapp中实现图片裁剪效果，临时文件路径，照相，相片，圆形头像，圆弧，裁剪圆形，调整裁剪比例，裁剪插件，uniApp通用兼容的头像裁剪插件，示例代码，详细教程，app端做头像裁剪并上传，头像上传后进行裁切，手势缩放，选择图片裁剪设置用户头像，手机相册，摄像
android 自定义圆角的头像
05-22
免费给大家，大家觉得有用 的话，请留下评论。
Android 自定义圆角头像
u014714188的博客
08-05 496
Android 自定义圆角头像 在自己项目中新建文件夹views,在该目录下新建类CircleImageView （圆角图片）。 CircleImageView 类的实现如下。 相关注释代码已经标注，可以直接复制即可。 package com.xie.com.imoocmusic.views; import android.content.Context; import android.grap...
安卓实现圆角头像，已封装成工具类，方便使用
Hansion的博客
06-14 1224
将圆角头像的功能封装在工具类中，实现起来就是这么便捷
Android圆角头像工具类详解
01-03
很多android应用都用到了圆角头像，或者一些圆角图片处理起来比较麻烦，直接上圆角图片工具类 public class CircleImageView extends ImageView { // 缩放类型 private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP; private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888; private static final int COLORDRAWABLE_DIMENSIO
android xml 圆形图片,Android ImageView实现圆角，圆形图片
weixin_29529047的博客
05-26 876
UI设计中，为了有更好的效果，用户的头像很多以圆形方式显示，其实现的步骤1 在res/values/attrs中添加2 自定义View,CustomImageView.javapackage com.hy2014.workovertime.view;import com.hy2014.workovertime.R;import android.content.Context;import andr...
Android项目中遇到的坑之（Android圆角圆形图 二）
vv_bug
10-10 3501
接着上一篇的问题来研究研究： **问题来了：效果是有了，但有发现么？我设置的scaleType只有fitxy 是有效果的，其他的都没有效果了。设置为其他的scaleType都变成matrix那种效果了，也就是图片默认从控件的左上角开始摆放。**我们先看看ImageView的scaleType 以下内容来自http://www.2cto.com/kf/201411/348601.html 让
Android自定义View-矩形圆角进度条
half_bottle的博客
08-13 1737
参考 Android Canvas 绘制 剪切 clip 与 几何变换 Android Canvas绘图详解（图文)
Android 上传头像(文件)到服务器
武凯凯
09-06 3418
现在很多app都用到了头像的功能，我的项目中也用到了。 头像上传分几步： 1.获取头像 2.剪裁头像 3.文件上传 4.服务器的接受保存 首先第一步，无非就是两种方式 1，拍照 2，相册选择 之前的博客中有现到，不重复，链接： http://blog.csdn.net/w18756901575/article/details/52087242 http://
Android自定义圆角ImageView控件
01-04
目前一些比较火的图片加载库虽然支持圆角加载,若你是接的别人作了一半的项目,刚好别人用的图片加载库刚好不支持圆角加载,那么这颗控件你值得拥有.(支持网络图片的加载) 1.创建CustomImageView 类在你的项目中(源码如下) import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.Bitmap.Config; import android.graphics.BitmapFactory; im
android 绘制六边形
02-18
根据屏幕分辨率来绘制的一个由6个正六边形组成的图形。可以调整边长来对图形进行放大或者缩放。
安卓圆形头像制作两种方法。
woshizhu250的博客
09-21 851
方法一： 利用Paint的setXfermode()方法， http://blog.csdn.net/t12x3456/article/details/10432935这篇博客详细介绍了该方法 这个方法主要是运用于两个图层的复合裁剪，根据里面参数的不同可以完成不同的裁剪，详情看下张图 图片来自鸿洋大神的blog，我也是从大神博客中了解的，写一点自己的理解. 其实原理很简单 
android ui头像圆角化,Android圆角头像工具类详解
weixin_39539563的博客
05-27 224
很多android应用都用到了圆角头像，或者一些圆角图片处理起来比较麻烦，直接上圆角图片工具类public class CircleImageView extends ImageView {// 缩放类型private static final ScaleType SCALE_TYPE = ScaleType.CENTER_CROP;private static final Bitmap.Conf...
Android 正 N 边形圆角头像的实现，android移动开发基础答案
m0_66145114的博客
01-24 560
第二种： 使用 BitmapShader 实现 今天，让我们一起来看一下怎样实现正 N 变形圆角头像的实现。 在讲解之前，让我们先来看一下怎样使用我们的控件 老规矩，在讲解怎样实现以前，我们先一起来看一下怎样使用我们的自定义控件。 自定义属性说明 | 参数 | 说明 | | — | — | | type | 相应的值有 circle，round，polyg on | | miv_border_width | 表示边界 Path 的宽度 (默认值是 0 ) | | miv_.
头像圆角处理，图片处理为圆形显示。
ht799426868的博客
05-07 1343
border-radius:100px;
addHeaderView()异常 —— setAdapter has already been called
最新发布
2401_84814425的博客
05-06 1050
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长或者是报班学习，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！因此收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
Android 圆形头像的两种实现方式，阿里、腾讯大厂Android面试必问知识点系统梳理
03-27 975
由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！由于整个文档比较全面，内容比较多，篇幅不允许，下面以截图方式展示。再附一部分Android架构面试视频讲解：：vip204888 备注Android获取（资料价值较高，非无偿）**[外链图片转存中…(img-owi29d72-1711542935009)]由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
android 六边形简书,六边形架构入门与实践
weixin_29278805的博客
05-31 208
说明六边形架构又称“端口和适配器模式”，是Alistair Cockburn提出的一种具有对称性特征的架构风格。在这种架构中，系统通过适配器的方式与外部交互，将应用服务于领域服务封装在系统内部。架构图每一种外部系统都有一个适配器与之对应，外界通过应用层API与内部交互六边形架构还是一种分层架构，如上图所示，它被分为了三层：端口适配器、应用层与领域层。而端口又可以分为输入端口和输出端口。输入端口用于...
Android自定义控件实现圆形与圆角ImageView
"Android自定义控件实现圆形和圆角图像的方法" 在Android应用开发中，经常遇到需要将用户头像显示为圆形或带有圆角的图像的需求。本篇文章主要探讨如何通过自定义控件来实现这一功能。首先，文章提出问题：在背景不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值