[关闭]
@946898963 2019-10-04T16:38:21.000000Z 字数 16439 阅读 2537

自定义圆角矩形的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)

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

代码如下所示：

  1. public class RoundRectImageViewA extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewA(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewA(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewA(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 = scaleBitmap(rawBitmap);
  25.             //将newBitmap 转换成圆形
  26.             Bitmap circleBitmap = toRoundCorner(newBitmap, 30);
  28.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  29.             paint.reset();
  30.             //绘制到画布上
  31.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  32.         } else {
  33.             super.onDraw(canvas);
  34.         }
  35.     }
  38.     //将头像按比例缩放
  39.     private Bitmap scaleBitmap(Bitmap bitmap){
  40.         int width = getWidth();
  41.         int height = getHeight();
  42.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  43.         float scaleX = (float)width/(float)bitmap.getWidth();
  44.         float scaleY = (float) height / (float) bitmap.getHeight();
  45.         Matrix matrix = new Matrix();
  46.         matrix.postScale(scaleX, scaleY);
  47.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  49.     }
  51.     private Bitmap toRoundCorner(Bitmap bitmap, int radius) {
  53.         //指定为 ARGB_4444 可以减小图片大小
  54.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  55.         Canvas canvas = new Canvas(output);
  57.         final int color = 0xff424242;
  58.         final Rect rect = new Rect(0, 0,bitmap.getWidth(), bitmap.getHeight());
  59.         paint.setAntiAlias(true);
  60.         canvas.drawARGB(0, 0, 0, 0);
  61.         paint.setColor(color);
  62.         int x = bitmap.getWidth();
  63.         canvas.drawRoundRect(new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()), radius,radius, paint);
  64.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  65.         canvas.drawBitmap(bitmap, rect, rect, paint);
  66.         return output;
  67.     }
  69. }

大多数情况下，要展示图片的控件（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)

方法中控制。

利用这种缩放方式实现了RoundRectImageViewB（有问题，还未找到原因），代码如下所示：

  1. public class RoundRectImageViewB extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewB(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewB(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewB(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();
  24.             //将newBitmap 转换成圆形
  25.             Bitmap circleBitmap = toRoundCorner(rawBitmap, 30);
  27.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  28.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  30.             paint.reset();
  31.             //绘制到画布上
  32.             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.     }
  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 radius) {
  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.drawRoundRect(new RectF(0,0,bitmap.getWidth(),bitmap.getHeight()), radius,radius, paint);
  78.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  79.         canvas.drawBitmap(bitmap, rect, rect, paint);
  80.         return output;
  81.     }
  82. }

通过BitmapShader方式实现

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

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

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

  1. public class RoundRectImageViewC extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewC(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewC(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewC(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 newBitmap = scaleBitmap(rawBitmap);
  25.             Bitmap circleBitmap = toRoundCorner(newBitmap, 30);
  27.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  29.             paint.reset();
  31.             //绘制到画布上
  32.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  33.         } else {
  34.             super.onDraw(canvas);
  35.         }
  36.     }
  39.     //将头像按比例缩放
  40.     private Bitmap scaleBitmap(Bitmap bitmap){
  41.         int width = getWidth();
  42.         int height = getHeight();
  43.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  44.         float scaleX = (float)width/(float)bitmap.getWidth();
  45.         float scaleY = (float) height / (float) bitmap.getHeight();
  46.         Matrix matrix = new Matrix();
  47.         matrix.postScale(scaleX, scaleY);
  48.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  49.     }
  51.     private Bitmap toRoundCorner(Bitmap bitmap, int radius) {
  53.         // 初始化绘制纹理图
  54.         BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  56.         //指定为 ARGB_4444 可以减小图片大小
  57.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  58.         Canvas canvas = new Canvas(output);
  60.         // 初始化画笔
  61.         Paint paint = new Paint();
  62.         paint.setAntiAlias(true);
  63.         paint.setShader(bitmapShader);
  65.         // 利用画笔将纹理图绘制到画布上面
  66.         canvas.drawRoundRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), radius, radius, paint);
  68.         return output;
  70.     }
  71. }

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

利用Rect实现缩放的RoundImageViewD（有问题，还未找到原因）

  1. public class RoundRectImageViewD extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewD(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewD(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewD(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 circleBitmap = toRoundCorner(rawBitmap, 30);
  25.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  27.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  29.             paint.reset();
  31.             //绘制到画布上
  32.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  33.         } else {
  34.             super.onDraw(canvas);
  35.         }
  36.     }
  40.     private Bitmap toRoundCorner(Bitmap bitmap, int radius) {
  42.         // 初始化绘制纹理图
  43.         BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
  45.         //指定为 ARGB_4444 可以减小图片大小
  46.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  47.         Canvas canvas = new Canvas(output);
  49.         // 初始化画笔
  50.         Paint paint = new Paint();
  51.         paint.setAntiAlias(true);
  52.         paint.setShader(bitmapShader);
  54.         // 利用画笔将纹理图绘制到画布上面
  55.         canvas.drawRoundRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), radius, radius, paint);
  57.         return output;
  59.     }
  60. }

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

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

通过画布裁剪的方式实现

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

  1. public class RoundRectImageViewE extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewE(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewE(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewE(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,30);
  28.             final Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  29.             paint.reset();
  30.             //绘制到画布上
  31.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  32.         } else {
  33.             super.onDraw(canvas);
  34.         }
  35.     }
  38.     //将原始图像裁剪成正方形
  39.     private Bitmap dealRawBitmap(Bitmap bitmap){
  40.         int width = bitmap.getWidth();
  41.         int height = bitmap.getHeight();
  42.         //获取宽度
  43.         int minWidth = width > height ?  height:width ;
  44.         //计算正方形的范围
  45.         int leftTopX = (width - minWidth)/2;
  46.         int leftTopY = (height - minWidth)/2;
  47.         //裁剪成正方形
  48.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  49.         return  scaleBitmap(newBitmap);
  50.     }
  52.     //将头像按比例缩放
  53.     private Bitmap scaleBitmap(Bitmap bitmap){
  54.         int width = getWidth();
  55.         int height = getHeight();
  56.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  57.         float scaleX = (float)width/(float)bitmap.getWidth();
  58.         float scaleY = (float) height / (float) bitmap.getHeight();
  59.         Matrix matrix = new Matrix();
  60.         matrix.postScale(scaleX, scaleY);
  61.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  63.     }
  64.     private Bitmap toRoundCorner(Bitmap bitmap,int radius) {
  67.         //指定为 ARGB_4444 可以减小图片大小
  68.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  69.         Canvas canvas = new Canvas(output);
  71.         // 初始化画笔
  72.         Paint paint = new Paint();
  73.         paint.setAntiAlias(true);
  74.         paint.setFilterBitmap(true);
  76.         Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  78.         Path path = new Path();
  79.         path.addRoundRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), radius, radius, Path.Direction.CW);
  80.         canvas.clipPath(path, Region.Op.INTERSECT);
  82.         canvas.drawBitmap(bitmap,rect,rect,paint);
  84.         return output;
  85.     }
  86. }

通过Rect缩放实现的RoundRectImageViewF。

  1. /**
  2.  * 圆形控件
  3.  *
  4.  * @author zhangyan
  5.  *
  6.  */
  7. public class RoundRectImageViewF extends ImageView {
  9.     private Paint paint = new Paint();
  11.     public RoundRectImageViewF(Context context) {
  12.         super(context);
  13.     }
  15.     public RoundRectImageViewF(Context context, AttributeSet attrs) {
  16.         super(context, attrs);
  17.     }
  19.     public RoundRectImageViewF(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,30);
  34.             final Rect rectSrc = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  35.             final Rect rectDes = new Rect(0, 0, getWidth(), getHeight());
  37.             paint.reset();
  38.             //绘制到画布上
  39.             canvas.drawBitmap(circleBitmap, rectSrc, rectDes, paint);
  40.         } else {
  41.             super.onDraw(canvas);
  42.         }
  43.     }
  46.     //将原始图像裁剪成正方形
  47.     private Bitmap dealRawBitmap(Bitmap bitmap){
  48.         int width = bitmap.getWidth();
  49.         int height = bitmap.getHeight();
  50.         //获取宽度
  51.         int minWidth = width > height ?  height:width ;
  52.         //计算正方形的范围
  53.         int leftTopX = (width - minWidth)/2;
  54.         int leftTopY = (height - minWidth)/2;
  55.         //裁剪成正方形
  56.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  57.         return  newBitmap;
  58.     }
  61.     private Bitmap toRoundCorner(Bitmap bitmap,int radius) {
  64.         //指定为 ARGB_4444 可以减小图片大小
  65.         Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_4444);
  66.         Canvas canvas = new Canvas(output);
  68.         // 初始化画笔
  69.         Paint paint = new Paint();
  70.         paint.setAntiAlias(true);
  71.         paint.setFilterBitmap(true);
  73.         Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
  75.         Path path = new Path();
  76.         path.addRoundRect(new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight()), radius, radius, Path.Direction.CW);
  77.         canvas.clipPath(path, Region.Op.INTERSECT);
  79.         canvas.drawBitmap(bitmap,rect,rect,paint);
  81.         return output;
  82.     }
  83. }

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

  1. /**
  2.  * 圆形控件
  3.  *
  4.  * @author zhangyan
  5.  *
  6.  */
  7. public class RoundRectImageViewE extends ImageView {
  9.     private Paint paint = new Paint();
  11.     public RoundRectImageViewE(Context context) {
  12.         super(context);
  13.     }
  15.     public RoundRectImageViewE(Context context, AttributeSet attrs) {
  16.         super(context, attrs);
  17.     }
  19.     public RoundRectImageViewE(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 circleBitmap = dealRawBitmap(rawBitmap);
  32.             Path path = new Path();
  33.             path.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), 30, 30, Path.Direction.CW);
  34.             canvas.clipPath(path, Region.Op.INTERSECT);
  36.             Rect rect = new Rect(0, 0, circleBitmap.getWidth(), circleBitmap.getHeight());
  38.             paint.reset();
  39.             //绘制到画布上
  40.             canvas.drawBitmap(circleBitmap, rect, rect, paint);
  42.         } else {
  43.             super.onDraw(canvas);
  44.         }
  45.     }
  48.     //将原始图像裁剪成正方形
  49.     private Bitmap dealRawBitmap(Bitmap bitmap){
  50.         int width = bitmap.getWidth();
  51.         int height = bitmap.getHeight();
  52.         //获取宽度
  53.         int minWidth = width > height ?  height:width ;
  54.         //计算正方形的范围
  55.         int leftTopX = (width - minWidth)/2;
  56.         int leftTopY = (height - minWidth)/2;
  57.         //裁剪成正方形
  58.         Bitmap newBitmap = Bitmap.createBitmap(bitmap,leftTopX,leftTopY,minWidth,minWidth,null,false);
  59.         return  scaleBitmap(newBitmap);
  60.     }
  62.     //将头像按比例缩放
  63.     private Bitmap scaleBitmap(Bitmap bitmap){
  64.         int width = getWidth();
  65.         int height = getHeight();
  66.         //一定要强转成float 不然有可能因为精度不够 出现 scale为0 的错误
  67.         float scaleX = (float)width/(float)bitmap.getWidth();
  68.         float scaleY = (float) height / (float) bitmap.getHeight();
  69.         Matrix matrix = new Matrix();
  70.         matrix.postScale(scaleX, scaleY);
  71.         return Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix, true);
  73.     }
  75. }

（实现的圆角矩形没有任何问题）

  1. public class RoundRectImageViewF extends ImageView {
  3.     private Paint paint = new Paint();
  5.     public RoundRectImageViewF(Context context) {
  6.         super(context);
  7.     }
  9.     public RoundRectImageViewF(Context context, AttributeSet attrs) {
  10.         super(context, attrs);
  11.     }
  13.     public RoundRectImageViewF(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.addRoundRect(new RectF(0, 0, getWidth(), getHeight()), 30, 30, Path.Direction.CW);
  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.     }
  56. }

Demo链接：ImageViews

参考链接：

Android自定义圆角矩形ImageView，支持Glide加载图片及颜色填充（XferMode方式主要参考自这篇文章）

【Android】自定义圆形ImageView(圆形头像 可指定大小)

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

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

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

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

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

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

Bitmap createBitmap参数(三)

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