[关闭]
@946898963 2019-10-04T08:38:04.000000Z 字数 16925 阅读 1359

自定义圆形的ImageView

Android自定义控件 Android绘图

实现圆形的ImageView最简单的方式可以使用裁剪和CardView来实现，但是裁剪的API只支持在Android 5.0及其以上的设备，所以适配起来可能会有问题，为了省去适配的麻烦，我们可以使用自定义控件的方式来实现圆形的ImageView。

通过Xfermode方式实现

使用画笔Paint去绘制东西，当绘制多个图层叠加的时候，有16中模式。效果如下图。

此处输入图片的描述

模式 说明
PorterDuff.Mode.CLEAR 所有绘制不会绘制到画布上
PorterDuff.Mode.SRC 显示上层绘制图形
PorterDuff.Mode.DST 显示下层绘制图形
PorterDuff.Mode.SRC_OVER 图形叠加，上层盖住下层
PorterDuff.Mode.DST_OVER 图形叠加，下层盖住上层
PorterDuff.Mode.SRC_IN 显示上层交集部分
PorterDuff.Mode.DST_IN 显示下层交集部分
PorterDuff.Mode.SRC_OUT 显示上层非交集部分
PorterDuff.Mode.DST_OUT 显示下层非交集部分
PorterDuff.Mode.SRC_ATOP 显示下层非交集部分和上层交集部分
PorterDuff.Mode.DST_ATOP 显示下层交集部分与上层非交集部分
PorterDuff.Mode.XOR 去除交集部分
PorterDuff.Mode.DARKEN 交集部分颜色加深
PorterDuff.Mode.LIGHTEN 交集部分颜色变亮
PorterDuff.Mode.MULTIPLY 显示交集部分，颜色混合叠加
PorterDuff.Mode.SCREEN 取两图层全部区域，交集部分变为透明色

官方demo中主要绘制代码如下：

  1. // mDstB是黄色的圆形图bitmap
  2. // mSrcB是蓝色的矩形图bitmap
  3. canvas.drawBitmap(mDstB, 0, 0, paint);
  4. paint.setXfermode(sModes[i]);
  5. canvas.drawBitmap(mSrcB, 0, 0, paint)

更详细的内容，建议阅读：Paint Xfermode 学习小结。

可以看到在两个绘制图形过程中，添加Xfermode绘制模式，能够改变两个图的叠加效果，我们主要关注一下SrcIn模式，可以看见，用图层叠加的交集去截取mSrcB图，可以利用这个，先绘制一个圆角的图，然后设置绘制模式，接着绘制一个矩形的图，两者一叠加，正好是用圆角图去截取矩形图，矩形图也就是我们的原图片了。

代码如下所示：

  1. public class RoundImageViewA extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundImageViewA(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundImageViewA(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundImageViewA(Context context, AttributeSet attrs, int defStyle) {
  14.         super(context, attrs, defStyle);
  15.     }
  17.     @Override
  18.     protected void onDraw(Canvas canvas) {
  19.         Drawable drawable = getDrawable();
  20.         if (null != drawable) {
  21.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  23.             //处理Bitmap 转成正方形
  24.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  25.             //将newBitmap 转换成圆形
  26.             Bitmap circleBitmap = toRoundCorner(newBitmap, 14);
  28.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  29.             // 重置画笔，不然会留下黑色区域
  30.             paint.reset();
  31.             //绘制到画布上
  32.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  33.         } else {
  34.             super.onDraw(canvas);
  35.         }
  36.     }
  39.     //将原始图像裁剪成正方形
  40.     private Bitmap dealRawBitmap(Bitmap bitmap){
  41.         int width = bitmap.getWidth();
  42.         int height = bitmap.getHeight();
  43.         //获取宽度
  44.         int minWidth = width > height ?  height:width ;
  45.         //计算正方形的范围
  46.         int leftTopX = (width - minWidth)/2;
  47.         int leftTopY = (height - minWidth)/2;
  48.         //裁剪成正方形
  49.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  50.         //裁剪后也可以不进行缩放操作，而是将缩放操作放在最后去做。详情请阅读：https://blog.csdn.net/ydxlt/article/details/80307516
  51.         return  scaleBitmap(newBitmap);
  52.     }
  54.     //将头像按比例缩放
  55.     private Bitmap scaleBitmap(Bitmap bitmap){
  56.         int width = getWidth();
  57.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  58.         float scale = (float)width/(float)bitmap.getWidth();
  59.         Matrix matrix = new Matrix();
  60.         matrix.postScale(scale, scale);
  61.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  63.     }
  65.     private Bitmap toRoundCorner(Bitmap bitmap, int pixels) {
  67.         //指定为 ARGB_4444 可以减小图片大小
  68.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  69.         Canvas canvas = new Canvas(output);
  71.         final int color = 0xff424242;
  72.         final Rect rect = new Rect(0, 0,bitmap.getWidth(), bitmap.getHeight());
  73.         paint.setAntiAlias(true);
  74.         canvas.drawARGB(0, 0, 0, 0);
  75.         paint.setColor(color);
  76.         int x = bitmap.getWidth();
  77.         canvas.drawCircle(x / 2, x / 2, x / 2, paint);
  78.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  79.         canvas.drawBitmap(bitmap, rect, rect, paint);
  80.         return output;
  81.     }
  83. }

大多数情况下，要展示图片的控件（ImageView）的长宽和图片的长宽并不是一致的，甚至长宽比都不一致，所以在拿到一张图片时候，大多数情况下需要根据控件的大小对图片进行拉伸缩放处理，有人会问为什么不直接使用ImageView属性scaleType去控制拉伸缩放，这是因为当我们将一个Bitmap绘制成圆角后，再去进行拉伸缩放，圆角可能会变形，所以在Bitmap设置到控件之前就需要对Bitmap进行一下拉伸缩放处理，直接看下面代码。

  1. // 图片根据控件大小等比例缩放拉伸
  2. float widthScale = imageViewWidth * 1.0f / bitmap.getWidth();
  3. float heightScale = imageViewHeight * 1.0f / bitmap.getHeight();
  4. // 设置长宽拉伸缩放比
  5. Matrix matrix = new Matrix();
  6. matrix.setScale(widthScale, heightScale);
  7. // 拉伸缩放图片
  8. Bitmap newBt = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);

拉伸缩放也可以在

  1. Canvas.drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

方法中控制。

利用这种缩放方式实现了RoundImageViewB，代码如下所示：

  1. public class RoundImageViewB extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundImageViewB(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundImageViewB(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundImageViewB(Context context, AttributeSet attrs, int defStyle) {
  14.         super(context, attrs, defStyle);
  15.     }
  17.     @Override
  18.     protected void onDraw(Canvas canvas) {
  19.         Drawable drawable = getDrawable();
  20.         if (null != drawable) {
  21.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  23.             //处理Bitmap 转成正方形
  24.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  25.             //将newBitmap 转换成圆形
  26.             Bitmap circleBitmap = toRoundCorner(newBitmap, 14);
  28.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  29.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  30.             paint.reset();
  31.             //绘制到画布上
  32.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  33.         } else {
  34.             super.onDraw(canvas);
  35.         }
  36.     }
  39.     //将原始图像裁剪成正方形
  40.     private Bitmap dealRawBitmap(Bitmap bitmap){
  41.         int width = bitmap.getWidth();
  42.         int height = bitmap.getHeight();
  43.         //获取宽度
  44.         int minWidth = width > height ?  height:width ;
  45.         //计算正方形的范围
  46.         int leftTopX = (width - minWidth)/2;
  47.         int leftTopY = (height - minWidth)/2;
  48.         //裁剪成正方形
  49.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  50.         return  newBitmap;
  51.     }
  53.     private Bitmap toRoundCorner(Bitmap bitmap, int pixels) {
  55.         //指定为 ARGB_4444 可以减小图片大小
  56.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  57.         Canvas canvas = new Canvas(output);
  59.         final int color = 0xff424242;
  60.         final Rect rect = new Rect(0, 0,bitmap.getWidth(), bitmap.getHeight());
  61.         paint.setAntiAlias(true);
  62.         canvas.drawARGB(0, 0, 0, 0);
  63.         paint.setColor(color);
  64.         int x = bitmap.getWidth();
  65.         canvas.drawCircle(x / 2, x / 2, x / 2, paint);
  66.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  67.         canvas.drawBitmap(bitmap, rect, rect, paint);
  68.         return output;
  69.     }
  70. }

通过BitmapShader方式实现

所有的绘制圆角的实现，推荐使用这个方法，不仅仅可以帮助我们实现圆角，连部分圆角都可以实现，比如顶部是两个圆角，底部是两个直角的图片。

首先介绍一下BitmapShader这个类，它作为纹理用于绘制一张图。新图可以是纹理图重复/镜像/边缘像素拉伸而绘制成的新图。这个类构造函数很简单，BitmapShader(Bitmap bitmap, TileMode tileX, TileMode tileY)，第一个参数是Bitmap，作为纹理图传入，tileX是指在水平方向上的绘制方式，tileY是指在竖直方向上的绘制方式。TileMode有三种属性，拉伸、重复、镜像。

使用BitmapShader绘制图的时候，是从画布的左上角开始绘制的。我们是使用拉伸的绘制模式，直接来看一下代码，了解处理过程。

  1. /**
  2.  * 圆形控件
  3.  *
  4.  * @author ljnalex
  5.  *
  6.  */
  7. public class RoundImageViewC extends ImageView {
  9.     private Paint paint = new Paint();
  11.     public RoundImageViewC(Context context) {
  12.         super(context);
  13.     }
  15.     public RoundImageViewC(Context context, AttributeSet attrs) {
  16.         super(context, attrs);
  17.     }
  19.     public RoundImageViewC(Context context, AttributeSet attrs, int defStyle) {
  20.         super(context, attrs, defStyle);
  21.     }
  23.     @Override
  24.     protected void onDraw(Canvas canvas) {
  25.         Drawable drawable = getDrawable();
  26.         if (null != drawable) {
  27.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  29.             //处理Bitmap 转成正方形
  30.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  31.             //将newBitmap 转换成圆形
  32.             Bitmap circleBitmap = toRoundCorner(newBitmap, 14);
  34.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  35.             paint.reset();
  36.             //绘制到画布上
  37.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  38.         } else {
  39.             super.onDraw(canvas);
  40.         }
  41.     }
  43.     //将原始图像裁剪成正方形
  44.     private Bitmap dealRawBitmap(Bitmap bitmap){
  45.         int width = bitmap.getWidth();
  46.         int height = bitmap.getHeight();
  47.         //获取宽度
  48.         int minWidth = width > height ?  height:width ;
  49.         //计算正方形的范围
  50.         int leftTopX = (width - minWidth)/2;
  51.         int leftTopY = (height - minWidth)/2;
  52.         //裁剪成正方形
  53.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  54.         return  scaleBitmap(newBitmap);
  55.     }
  57.     //将头像按比例缩放
  58.     private Bitmap scaleBitmap(Bitmap bitmap){
  59.         int width = getWidth();
  60.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  61.         float scale = (float)width/(float)bitmap.getWidth();
  62.         Matrix matrix = new Matrix();
  63.         matrix.postScale(scale, scale);
  64.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  66.     }
  68.     private Bitmap toRoundCorner(Bitmap bitmap, int pixels) {
  70.         // 初始化绘制纹理图
  71.         BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  73.         //指定为 ARGB_4444 可以减小图片大小
  74.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  75.         Canvas canvas = new Canvas(output);
  77.         // 初始化画笔
  78.         Paint paint = new Paint();
  79.         paint.setAntiAlias(true);
  80.         paint.setShader(bitmapShader);
  82.         // 利用画笔将纹理图绘制到画布上面
  83.         canvas.drawCircle(bitmap.getWidth()/2,bitmap.getWidth()/2,bitmap.getWidth()/2,paint);
  85.         return output;
  87.     }
  88. }

首先初始化了绘制的纹理图。然后初始化了画布和画笔，设置画笔绘制的纹理图，画笔在绘制图形时候就不是使用单纯的颜色绘制了。最后在利用画笔在画布上面绘制出圆形图片。

利用Rect实现缩放的RoundImageViewD

  1. /**
  2.  * 圆形控件
  3.  * @author ljnalex
  4.  */
  5. public class RoundImageViewD extends ImageView {
  7.     private Paint paint = new Paint();
  9.     public RoundImageViewD(Context context) {
  10.         super(context);
  11.     }
  13.     public RoundImageViewD(Context context, AttributeSet attrs) {
  14.         super(context, attrs);
  15.     }
  17.     public RoundImageViewD(Context context, AttributeSet attrs, int defStyle) {
  18.         super(context, attrs, defStyle);
  19.     }
  21.     @Override
  22.     protected void onDraw(Canvas canvas) {
  23.         Drawable drawable = getDrawable();
  24.         if (null != drawable) {
  25.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  27.             //处理Bitmap 转成正方形
  28.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  29.             //将newBitmap 转换成圆形
  30.             Bitmap circleBitmap = toRoundCorner(newBitmap, 14);
  32.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  33.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  35.             paint.reset();
  36.             //绘制到画布上
  37.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  38.         } else {
  39.             super.onDraw(canvas);
  40.         }
  41.     }
  44.     //将原始图像裁剪成正方形
  45.     private Bitmap dealRawBitmap(Bitmap bitmap){
  46.         int width = bitmap.getWidth();
  47.         int height = bitmap.getHeight();
  48.         //获取宽度
  49.         int minWidth = width > height ?  height:width ;
  50.         //计算正方形的范围
  51.         int leftTopX = (width - minWidth)/2;
  52.         int leftTopY = (height - minWidth)/2;
  53.         //裁剪成正方形
  54.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  55.         return  newBitmap;
  56.     }
  58.     private Bitmap toRoundCorner(Bitmap bitmap, int pixels) {
  60.         // 初始化绘制纹理图
  61.         BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  63.         //指定为 ARGB_4444 可以减小图片大小
  64.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  65.         Canvas canvas = new Canvas(output);
  67.         // 初始化画笔
  68.         Paint paint = new Paint();
  69.         paint.setAntiAlias(true);
  70.         paint.setShader(bitmapShader);
  72.         // 利用画笔将纹理图绘制到画布上面
  73.         canvas.drawCircle(bitmap.getWidth()/2,bitmap.getWidth()/2,bitmap.getWidth()/2,paint);
  75.         return output;
  77.     }
  78. }

利用BitmapShader还可以实现很多其他样式的效果，有下面几种：

具体请参考：Android圆角图片和圆形图片实现总结。

通过画布裁剪的方式实现

关于画布裁剪的知识，建议阅读：Canvas的裁剪。

  1. /**
  2.  * 圆形控件
  3.  *
  4.  * @author zhangyan
  5.  *
  6.  */
  7. public class RoundImageViewE extends ImageView {
  9.     private Paint paint = new Paint();
  11.     public RoundImageViewE(Context context) {
  12.         super(context);
  13.     }
  15.     public RoundImageViewE(Context context, AttributeSet attrs) {
  16.         super(context, attrs);
  17.     }
  19.     public RoundImageViewE(Context context, AttributeSet attrs, int defStyle) {
  20.         super(context, attrs, defStyle);
  21.     }
  23.     @Override
  24.     protected void onDraw(Canvas canvas) {
  25.         Drawable drawable = getDrawable();
  26.         if (null != drawable) {
  27.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  29.             //处理Bitmap 转成正方形
  30.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  31.             //将newBitmap 转换成圆形
  32.             Bitmap circleBitmap = toRoundCorner(newBitmap);
  34.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  35.             paint.reset();
  36.             //绘制到画布上
  37.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  38.         } else {
  39.             super.onDraw(canvas);
  40.         }
  41.     }
  44.     //将原始图像裁剪成正方形
  45.     private Bitmap dealRawBitmap(Bitmap bitmap){
  46.         int width = bitmap.getWidth();
  47.         int height = bitmap.getHeight();
  48.         //获取宽度
  49.         int minWidth = width > height ?  height:width ;
  50.         //计算正方形的范围
  51.         int leftTopX = (width - minWidth)/2;
  52.         int leftTopY = (height - minWidth)/2;
  53.         //裁剪成正方形
  54.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  55.         return  scaleBitmap(newBitmap);
  56.     }
  58.     //将头像按比例缩放
  59.     private Bitmap scaleBitmap(Bitmap bitmap){
  60.         int width = getWidth();
  61.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  62.         float scale = (float)width/(float)bitmap.getWidth();
  63.         Matrix matrix = new Matrix();
  64.         matrix.postScale(scale, scale);
  65.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  67.     }
  69.     private Bitmap toRoundCorner(Bitmap bitmap) {
  71.         //指定为 ARGB_4444 可以减小图片大小
  72.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  73.         Canvas canvas = new Canvas(output);
  75.         // 初始化画笔
  76.         Paint paint = new Paint();
  77.         paint.setAntiAlias(true);
  78.         paint.setFilterBitmap(true);
  80.         Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  82.         Path path = new Path();
  83.         path.addCircle(bitmap.getWidth()/2, bitmap.getWidth()/2,bitmap.getWidth()/2, Path.Direction.CCW);
  84.         canvas.clipPath(path, Region.Op.INTERSECT);
  85.         // 利用画笔将纹理图绘制到画布上面
  86.         canvas.drawBitmap(bitmap,rect,rect,paint);
  88.         return output;
  89.     }
  91. }

利用Rect实现缩放的RoundImageViewF。

  1. public class RoundImageViewF extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundImageViewF(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundImageViewF(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundImageViewF(Context context, AttributeSet attrs, int defStyle) {
  14.         super(context, attrs, defStyle);
  15.     }
  17.     @Override
  18.     protected void onDraw(Canvas canvas) {
  19.         Drawable drawable = getDrawable();
  20.         if (null != drawable) {
  21.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  23.             //处理Bitmap 转成正方形
  24.             Bitmap newBitmap = dealRawBitmap(rawBitmap);
  26.             Bitmap circleBitmap = toRoundCorner(newBitmap);
  28.             final Rect rectSrc = new Rect(0, 0, newBitmap.getWidth(), newBitmap.getHeight());
  29.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  31.             paint.reset();
  32.             //绘制到画布上
  33.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  34.         } else {
  35.             super.onDraw(canvas);
  36.         }
  37.     }
  40.     //将原始图像裁剪成正方形
  41.     private Bitmap dealRawBitmap(Bitmap bitmap){
  42.         int width = bitmap.getWidth();
  43.         int height = bitmap.getHeight();
  44.         //获取宽度
  45.         int minWidth = width > height ?  height:width ;
  46.         //计算正方形的范围
  47.         int leftTopX = (width - minWidth)/2;
  48.         int leftTopY = (height - minWidth)/2;
  49.         //裁剪成正方形
  50.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  51.         return  newBitmap;
  52.     }
  55.     private Bitmap toRoundCorner(Bitmap bitmap) {
  57.         //指定为 ARGB_4444 可以减小图片大小
  58.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  59.         Canvas canvas = new Canvas(output);
  61.         // 初始化画笔
  62.         Paint paint = new Paint();
  63.         paint.setAntiAlias(true);
  64.         paint.setFilterBitmap(true);
  66.         Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  68.         Path path = new Path();
  69.         path.addCircle(bitmap.getWidth()/2, bitmap.getWidth()/2,bitmap.getWidth()/2, Path.Direction.CCW);
  70.         canvas.clipPath(path, Region.Op.INTERSECT);
  71.         // 利用画笔将纹理图绘制到画布上面
  72.         canvas.drawBitmap(bitmap,rect,rect,paint);
  74.         return output;
  75.     }
  77. }

在面试的过程中阿里的面试官说这种方案会新建一个Bitmap，所以可能会导致内存占用率过高。我们可以改进上面的裁剪的实现方式，直接在原来的画布上进行裁剪，避免创建新的的Bitmap，改进后的代码如下所示：

  1. public class RoundImageViewE extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundImageViewE(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundImageViewE(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundImageViewE(Context context, AttributeSet attrs, int defStyle) {
  14.         super(context, attrs, defStyle);
  15.     }
  17.     @Override
  18.     protected void onDraw(Canvas canvas) {
  19.         Drawable drawable = getDrawable();
  20.         if (null != drawable) {
  21.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  23.             //处理Bitmap 转成正方形
  24.             Bitmap circleBitmap = dealRawBitmap(rawBitmap);
  26.             Path path = new Path();
  27.             path.addCircle(getWidth()/2, getHeight()/2,getWidth()/2, Path.Direction.CCW);
  28.             canvas.clipPath(path, Region.Op.INTERSECT);
  30.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  31.             paint.reset();
  32.             //绘制到画布上
  33.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  35.         } else {
  36.             super.onDraw(canvas);
  37.         }
  38.     }
  41.     //将原始图像裁剪成正方形
  42.     private Bitmap dealRawBitmap(Bitmap bitmap){
  43.         int width = bitmap.getWidth();
  44.         int height = bitmap.getHeight();
  45.         //获取宽度
  46.         int minWidth = width > height ?  height:width ;
  47.         //计算正方形的范围
  48.         int leftTopX = (width - minWidth)/2;
  49.         int leftTopY = (height - minWidth)/2;
  50.         //裁剪成正方形
  51.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  52.         return  scaleBitmap(newBitmap);
  53.     }
  55.     //将头像按比例缩放
  56.     private Bitmap scaleBitmap(Bitmap bitmap){
  57.         int width = getWidth();
  58.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  59.         float scale = (float)width/(float)bitmap.getWidth();
  60.         Matrix matrix = new Matrix();
  61.         matrix.postScale(scale, scale);
  62.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  64.     }
  65. }
  1. public class RoundImageViewF extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundImageViewF(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundImageViewF(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundImageViewF(Context context, AttributeSet attrs, int defStyle) {
  14.         super(context, attrs, defStyle);
  15.     }
  17.     @Override
  18.     protected void onDraw(Canvas canvas) {
  19.         Drawable drawable = getDrawable();
  20.         if (null != drawable) {
  21.             Bitmap rawBitmap =((BitmapDrawable)drawable).getBitmap();
  23.             //处理Bitmap 转成正方形
  24.             Bitmap circleBitmap = dealRawBitmap(rawBitmap);
  26.             Path path = new Path();
  27.             path.addCircle(getWidth()/2, getHeight()/2,getWidth()/2, Path.Direction.CCW);
  28.             canvas.clipPath(path, Region.Op.INTERSECT);
  30.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  31.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  32.             paint.reset();
  33.             //绘制到画布上
  34.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  37.         } else {
  38.             super.onDraw(canvas);
  39.         }
  40.     }
  42.     //将原始图像裁剪成正方形
  43.     private Bitmap dealRawBitmap(Bitmap bitmap){
  44.         int width = bitmap.getWidth();
  45.         int height = bitmap.getHeight();
  46.         //获取宽度
  47.         int minWidth = width > height ?  height:width ;
  48.         //计算正方形的范围
  49.         int leftTopX = (width - minWidth)/2;
  50.         int leftTopY = (height - minWidth)/2;
  51.         //裁剪成正方形
  52.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  53.         return  newBitmap;
  54.     }
  55. }

Demo链接：ImageViews

参考链接：

【Android】自定义圆形ImageView(圆形头像 可指定大小)（XferMode方式主要参考自这篇文章）

Android自定义圆角矩形ImageView，支持Glide加载图片及颜色填充&&Android圆角图片和圆形图片实现总结（利用Rect对Bitmap进行缩放，参考自这两篇文章）

Android圆角图片和圆形图片实现总结（BitmapShader方式主要参考自这篇文章，这篇文章也详细的介绍了Xfermode的相关知识）

各个击破搞明白PorterDuff.Mode（推荐阅读这个）

Android中Canvas绘图之PorterDuffXfermode使用及工作原理详解

细数PorterDuffXferMode的几个坑， PorterDuffXferMode不正确的真正原因

android中对Canvas.drawCircle()方法的理解

  1.  mPaint.setStyle(Paint.Style.STROKE);//空心效果  只会画出圆弧

如果不设置的话，画圆是实心的圆

android canvas void drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

Bitmap createBitmap参数(三)

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注