Glide自定义Transformation实现带外圆环的圆形图片加载

Case

Glide想要实现加载带纯色外圆环的圆形图片。如下图1

Glide自定义Transformation实现带外圆环的圆形图片加载_第1张图片

图1

之前写过《Glide自定义Transformation实现四个不同圆角图片加载》,通过多图层裁剪组合的方式，去绘制多个不同弧度圆角的图片，但在本篇中裁剪的方式并不适用，因为没有办法规避裁剪圆形bitmap，图形锯齿(毛边)的问题，因而本篇换个思路，通过PorterDuffXfermode去实现图形和圆环的绘制

实现思路

我们知道，通过使用PorterDuffXfermode可以实现将绘制的图形像素与Canvas中对应位置的像素按照一定规则进行混合，形成新的像素值，他的概念类似于数学中的集合运算，取图形交集、余集之类的，因而我们先圈出内圆区域，之后绘制源图，取内圆区域部分（交集 | SRC_IN），而后绘制外圆，取除去内圆以外的部分（余集 | DST_OVER），便能达到图1的效果，绘制过程如图2所示

Glide自定义Transformation实现带外圆环的圆形图片加载_第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方法变形而来。