android把图片变为带内圆和外圆,Glide自定义Transformation实现带外圆环的圆形图片加载...

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方法变形而来。