美文网首页
Glide4 绘制圆形描边

Glide4 绘制圆形描边

作者: _10_01_ | 来源:发表于2019-01-26 15:52 被阅读34次

Glide使用CircleCrop即可加载圆形图片,有时需求需要给图片加上一层白色描边:

复制一份TransformationUtils,修改circleCrop()方法,

// 描边画笔。
private static final Paint CIRCLE_CROP_WHITE_PAINT;
private static final int STROKE_WIDTH = 3;

static {
    // 这是Glide源码。
    CIRCLE_CROP_BITMAP_PAINT = new Paint(CIRCLE_CROP_PAINT_FLAGS);
    CIRCLE_CROP_BITMAP_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    // 描边画笔初始化。
    CIRCLE_CROP_WHITE_PAINT = new Paint(CIRCLE_CROP_PAINT_FLAGS);
    CIRCLE_CROP_WHITE_PAINT.setColor(Color.WHITE);
    CIRCLE_CROP_WHITE_PAINT.setStyle(Paint.Style.STROKE);
    CIRCLE_CROP_WHITE_PAINT.setAntiAlias(true);
    CIRCLE_CROP_WHITE_PAINT.setStrokeWidth(STROKE_WIDTH);
    //CIRCLE_CROP_WHITE_PAINT.setStrokeCap(Paint.Cap.ROUND);
    CIRCLE_CROP_WHITE_PAINT.setDither(true);
}

public static Bitmap circleCrop(@NonNull BitmapPool pool, @NonNull Bitmap inBitmap,
                                int destWidth, int destHeight) {
    int destMinEdge = Math.min(destWidth, destHeight);
    float radius = destMinEdge / 2f;

    int srcWidth = inBitmap.getWidth();
    int srcHeight = inBitmap.getHeight();

    float scaleX = destMinEdge / (float) srcWidth;
    float scaleY = destMinEdge / (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;

    RectF destRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);

    // Alpha is required for this transformation.
    Bitmap toTransform = getAlphaSafeBitmap(pool, inBitmap);

    Bitmap.Config outConfig = getAlphaSafeConfig(inBitmap);
    Bitmap result = pool.get(destMinEdge, destMinEdge, outConfig);
    result.setHasAlpha(true);

    BITMAP_DRAWABLE_LOCK.lock();
    try {
        Canvas canvas = new Canvas(result);
        // Draw a circle
        canvas.drawCircle(radius, radius, radius, CIRCLE_CROP_SHAPE_PAINT);
        // Draw the bitmap in the circle
        canvas.drawBitmap(toTransform, null, destRect, CIRCLE_CROP_BITMAP_PAINT);
        // Draw a white
        /************************描边*********************/
        float borderRadius = radius - (STROKE_WIDTH / 2);
        canvas.drawCircle(radius, radius, borderRadius, CIRCLE_CROP_WHITE_PAINT);
        /************************描边*********************/
        clear(canvas);
    } finally {
        BITMAP_DRAWABLE_LOCK.unlock();
    }

    if (!toTransform.equals(inBitmap)) {
        pool.put(toTransform);
    }

    return result;
}
public class CircleCropWhite extends CircleCrop {
    @Override
    protected Bitmap transform(
            @NonNull BitmapPool pool, @NonNull Bitmap toTransform, int outWidth, int outHeight) {
        return TransformationUtils.circleCrop(pool, toTransform, outWidth, outHeight);
    }
}
使用:
GlideApp.with(context)
        .load(image_url)
        .transforms(new CircleCropWhite())
        .into(image_view);
参考资料:

Glide 4.0 实现圆形+描边

相关文章

  • Glide4 绘制圆形描边

    Glide使用CircleCrop即可加载圆形图片,有时需求需要给图片加上一层白色描边: 复制一份Transfor...

  • Glide 绘制边框

    Glide 绘制边框 圆形Glide 内部已经实现。但描边效果需要我们自己绘制。在项目当中使用 CircleIma...

  • android圆形图加描边

    有时在实现圆形图后要加描边,其实描边也就是在view上画一个空心圆操作如下:1首先你已经有一个自定义的imagev...

  • 记录canvas学习3

    1.文本绘制 1.1绘制方法 strokeText(text,x,y) 描边文本fillText(text,x,...

  • canvas-04 着色

    一、图形着色区域: 描边区域:strokeStyle代表了描边样式,描边区域的绘制方法是stroke()、stro...

  • Canvas

    2D上下文: 两种基本绘图操作是填充和描边。 描边strokeStyle 填充fillStyle 绘制矩形: 矩形...

  • 【iOS UI篇】Label描边+发光字

    本文介绍如何给Label实现酷炫的描边+外发光效果,虽然实现简单,但是网上资料却是很少。 绘制实现描边 继承Lab...

  • 二维CANVAS基本语法(文字text)

    绘制文字text 绘制语句 设置文本字号字体 context.font = “Npx 字体”;默认为10px 描边...

  • 绘制圆形

    ct.arc() (第一个参数x,2,y,)圆心的位置 3 radius : 半径的大小 :0.5pi 1...

  • OK彩铅教程 | 十五的月亮十六圆

    今天和大家分享彩铅月亮的画法。 分步骤画法 1 、描轮廓 找家里合适大小的圆形物品盖在纸面上,沿着外轮廓描边。 (...

网友评论

      本文标题:Glide4 绘制圆形描边

      本文链接:https://www.haomeiwen.com/subject/szuijqtx.html