Case
Glide想要实现加载带纯色外圆环的圆形图片。如下图1
图1
之前写过 《Glide自定义Transformation实现四个不同圆角图片加载》,通过多图层裁剪组合的方式，去绘制多个不同弧度圆角的图片，但在本篇中裁剪的方式并不适用，因为没有办法规避裁剪圆形bitmap，图形锯齿(毛边)的问题，因而本篇换个思路，通过PorterDuffXfermode去实现图形和圆环的绘制
实现思路
我们知道，通过使用PorterDuffXfermode可以实现将绘制的图形像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值，他的概念类似于数学中的集合运算，取图形交集、余集之类的，因而我们先圈出内圆区域，之后绘制源图，取内圆区域部分（交集 | SRC_IN），而后绘制外圆，取除去内圆以外的部分（余集 | DST_OVER），便能达到图1的效果，绘制过程如图2所示
图2
关键步骤详解
步骤一：根据目标容器（ImageView）宽高取目标（最终Bitmap,下称目标）直径、半径、中心点坐标：
// 目标直径
int destMinEdge = Math.min(outWidth, outHeight);
// 目标半径 & 中心点坐标
float radius = destMinEdge / 2f;
步骤二（KEY STEP）：计算原图缩放后的大小：
// 修正源宽高,source为toTransform Bitmap对象
int srcWidth = source.getWidth();
int srcHeight = source.getHeight();
// （目标直径 - 外圆环宽度*2）/ 源Bitmap宽（高）度 = 缩放比例
float scaleX = (destMinEdge - borderWidth * 2) / (float) srcWidth;
float scaleY = (destMinEdge - borderWidth * 2) / (float) srcHeight;
// 计算缩放图片大小
float maxScale = Math.max(scaleX, scaleY);
float scaledWidth = maxScale * srcWidth;
float scaledHeight = maxScale * srcHeight;
步骤三：为保证源图片能绘制在目标中心，计算源绘制起始坐标
// 源绘制起始坐标
float left = (destMinEdge - scaledWidth) / 2f;
float top = (destMinEdge - scaledHeight) / 2f;
步骤四：分别绘制内圆区域、内圆图像、外圆圆环：
// 新建画布
Bitmap outBitmap = pool.get(destMinEdge, destMinEdge, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outBitmap);
// 绘制内圆
Paint srcPaint = new Paint(Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG | Paint.ANTI_ALIAS_FLAG);
srcPaint.setColor(borderColor);
RectF destRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);
canvas.drawCircle(radius, radius, radius - borderWidth, srcPaint);/*内圆区域*/
srcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, null, destRect, srcPaint);/*内圆图形*/
// 绘制外圆
Paint borderPaint = new Paint(Paint.DITHER_FLAG | Paint.ANTI_ALIAS_FLAG);
borderPaint.setColor(borderColor);
borderPaint.setStyle(Paint.Style.FILL);
borderPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
canvas.drawCircle(radius, radius, radius, borderPaint);/*外圆圆环*/
以下为BitmapTransformation的完整实现代码：
/**
* author : Conan
* time : 2019-12-26
* desc : 带外圆环的圆形图片
*/
public class CircleBorderTransform extends BitmapTransformation {
private final String ID = getClass().getName();
private float borderWidth;
private int borderColor;
public CircleBorderTransform(float borderWidth, int borderColor) {
this.borderWidth = borderWidth;
this.borderColor = borderColor;
}
@Override
protected Bitmap transform(@NonNull BitmapPool pool, @NonNull Bitmap source, int outWidth, int outHeight) {
// 目标直径
int destMinEdge = Math.min(outWidth, outHeight);
// 目标半径 & 中心点坐标
float radius = destMinEdge / 2f;
// 修正源宽高
int srcWidth = source.getWidth();
int srcHeight = source.getHeight();
float scaleX = (destMinEdge - borderWidth * 2) / (float) srcWidth;
float scaleY = (destMinEdge - borderWidth * 2) / (float) srcHeight;
float maxScale = Math.max(scaleX, scaleY);
float scaledWidth = maxScale * srcWidth;
float scaledHeight = maxScale * srcHeight;
// 源绘制起始坐标
float left = (destMinEdge - scaledWidth) / 2f;
float top = (destMinEdge - scaledHeight) / 2f;
// 新建画布
Bitmap outBitmap = pool.get(destMinEdge, destMinEdge, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(outBitmap);
// 绘制内圆
Paint srcPaint = new Paint(Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG | Paint.ANTI_ALIAS_FLAG);
srcPaint.setColor(borderColor);
RectF destRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);
canvas.drawCircle(radius, radius, radius - borderWidth, srcPaint);
srcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(source, null, destRect, srcPaint);
// 绘制外圆
Paint borderPaint = new Paint(Paint.DITHER_FLAG | Paint.ANTI_ALIAS_FLAG);
borderPaint.setColor(borderColor);
borderPaint.setStyle(Paint.Style.FILL);
borderPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OVER));
canvas.drawCircle(radius, radius, radius, borderPaint);
return outBitmap;
}
@Override
public void updateDiskCacheKey(MessageDigest messageDigest) {
messageDigest.update(ID.getBytes(CHARSET));
byte[] radiusData = ByteBuffer.allocate(Float.BYTES * 2).putFloat(borderWidth).putFloat(borderColor).array();
messageDigest.update(radiusData);
}
@Override
public boolean equals(Object o) {
if (o instanceof CircleBorderTransform) {
return borderColor == ((CircleBorderTransform) o).borderColor && borderWidth == ((CircleBorderTransform) o).borderWidth;
}
return false;
}
@Override
public int hashCode() {
int hashcode = Util.hashCode(borderWidth);
hashcode = Util.hashCode(borderColor, hashcode);
hashcode = Util.hashCode(ID.hashCode(), hashcode);
return hashcode;
}
}
使用示例
RequestOptions options = new RequestOptions()
.centerCrop()
.transform(new CircleBorderTransform(width, color));
Glide.with(context).load(url).apply(options).into(imageView);
参考
建议学习一下Glide封装好的TransformationUtils，本文即是根据circleCrop方法变形而来。