Android语言基础教程（177）Android图形图像处理技术中的为图形添加特效范例之实现带描边的圆角图片：别再用直角了！Android Canvas魔法：三步给你的图片穿上“圆边描边”高定礼服-优快云博客

唠一唠Android的“图片化妆术”

各位UI界的准魔法师们，大家好！不知道你们有没有这种感觉：App里全是直角方块的图片，看久了真的有点……“楞”？就像一个人永远只穿一种款式的衣服，虽然没啥错，但总少了点个性和精致。

这时候，圆角图片，尤其是带有一圈精致描边的圆角图片，就成了提升设计感的“大杀器”。它能让界面瞬间变得柔和、现代，甚至有了一丝“高级感”。今天，咱不整那些虚头巴脑的概念，直接进入“代码化妆间”，看看怎么给一张普通的Bitmap图片，施展这套“描边圆角”的换装魔法。

第一章：化妆前，先认识我们的“化妆箱”（核心类解析）

在开始动手前，咱们得先搞清楚手头的工具都是干啥用的，不然就成了“拿着眼影刷当眉笔”的糊涂蛋了。

Canvas（画布）：这位是咱们的“工作台”。所有的绘制操作，比如画圆、画方、画图片，最终都得在这个画布上进行。你可以把它想象成一张空白的画纸。
Paint（画笔）：顾名思义，就是“画笔”。但它可聪明了！它不仅决定了画什么颜色（setColor），还能决定线条的粗细（setStrokeWidth）、是否是实心还是空心（setStyle），甚至有没有抗锯齿（setAntiAlias）来让边缘更平滑。我们今天给图片加描边，全靠它来定义描边的样式。
Bitmap（位图）：这就是我们要加工的“原材料”——图片本身。在内存里，它就是一串像素数据。
Xfermode（混合模式）：这个是今天的“魔法核心”！ 它决定了当你在画布上画一个新的图形时，如何与画布上已有的内容进行混合。想象一下，PS里的图层混合模式（如正片叠底、滤色），Xfermode干的就是这个活儿。我们后面用来实现圆角，主要靠它的一个子类——PorterDuffXfermode。

第二章：魔法三步走，代码化妆师上线！

我们的目标：输入一张方图，输出一张圆角描边图。
我们的秘诀：分两步绘制，先裁切，后描边。

步骤一：创建“高级定制画布”

首先，我们不能直接在原图上乱画，那样会破坏原始数据。所以，我们需要创建一个新的、大小合适的空白Bitmap作为我们的“高级定制画布”，并为之配上一个Canvas。

// 1. 创建一张新的、空白的Bitmap，作为我们的画布，大小和原图一样
Bitmap output = Bitmap.createBitmap(sourceBitmap.getWidth(), sourceBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output); // 将这个Bitmap设置为Canvas的画布

这里ARGB_8888是最高质量的配置，包含透明度通道，必须用它，不然圆角透明处会变成黑色。

步骤二：施展“圆角裁切术”（核心魔法）

这一步是关键！我们要在画布上画一个圆角矩形，并且只让原图在这个圆角矩形的区域内显示出来。

// 2. 初始化我们的“魔法画笔” - 用来裁切
Paint paint = new Paint();
paint.setAntiAlias(true); // 开启抗锯齿，让圆角更平滑，必须！

// 计算圆角矩形的区域，就是整个图片的大小
Rect rect = new Rect(0, 0, sourceBitmap.getWidth(), sourceBitmap.getHeight());
RectF rectF = new RectF(rect); // RectF支持浮点数，计算圆角更精确

// 定义圆角的半径，这个值越大，角越圆
float cornerRadius = 50f; // 单位是像素，可以根据需要调整

// --- 魔法开始：设置混合模式为SRC_IN ---
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

// 先画一个圆角矩形作为“底”（DST）
canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
// 然后再画上原图（SRC），因为混合模式是SRC_IN，所以只会显示两者相交（IN）的部分，也就是圆角矩形区域内的图片
canvas.drawBitmap(sourceBitmap, rect, rect, paint);

// --- 魔法结束：清除混合模式，避免影响后续绘制 ---
paint.setXfermode(null);

PorterDuff.Mode.SRC_IN 魔法详解：

我们把画布上先画的圆角矩形看作 目标（Destination， DST）。
把后画上去的原图看作 源（Source， SRC）。
SRC_IN 这个模式的意思是：只绘制源图像和目标图像相交的区域，并且显示的是源图像。
所以，最终效果就是，只有那个圆角矩形区域内的原图被显示了出来，完美实现了圆角裁切！

步骤三：穿上“描边外衣”

现在，我们已经有了一张圆角图片output，但它还没有描边。描边是画在圆角外面的，所以我们在裁切完成后，再在上面画一个空心的圆角矩形即可。

// 3. 换一支画笔，专门用来画描边
Paint strokePaint = new Paint();
strokePaint.setAntiAlias(true);
strokePaint.setStyle(Paint.Style.STROKE); // 设置画笔样式为“描边”（空心）
strokePaint.setColor(Color.WHITE); // 设置描边颜色，比如白色
strokePaint.setStrokeWidth(10f); // 设置描边的宽度，单位像素

// 在之前绘制好的圆角图片上，画上这个描边
// 注意：描边的矩形区域需要稍微向内收缩一点，因为描边是从路径的中间向内外扩张的
RectF strokeRectF = new RectF(5, 5, sourceBitmap.getWidth() - 5, sourceBitmap.getHeight() - 5);
canvas.drawRoundRect(strokeRectF, cornerRadius, cornerRadius, strokePaint);

注意这里的strokeRectF比原来的rectF小了一点（左右上下各缩进了5个像素）。这是因为描边宽度是10，如果还在原来的边界上画，描边会有一半在图片外面，可能被父容器裁剪掉。向内收缩 strokeWidth / 2 的距离，可以让描边完整地显示在图片边界内侧。

第三章：完整魔法咒语书（完整示例代码）

理论说一千道一万，不如直接上代码来得实在。下面就是一个完整的、即拿即用的工具方法。

import android.graphics.*;
/**
 * 图片处理工具类 - 打造带描边的圆角图片
 */
public class ImageProcessor {

    /**
     * 将输入的Bitmap转换为带描边的圆角图片
     *
     * @param sourceBitmap 原图
     * @param cornerRadius 圆角半径（像素）
     * @param strokeColor  描边颜色
     * @param strokeWidth  描边宽度（像素）
     * @return 处理后的带描边圆角图片
     */
    public static Bitmap createRoundRectBitmapWithStroke(Bitmap sourceBitmap, float cornerRadius, int strokeColor, float strokeWidth) {
        // 参数安全检查
        if (sourceBitmap == null) {
            return null;
        }

        int width = sourceBitmap.getWidth();
        int height = sourceBitmap.getHeight();

        // 1. 创建空白输出Bitmap
        Bitmap output = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        // 2. 初始化画笔（用于裁切）
        Paint paint = new Paint();
        paint.setAntiAlias(true);

        // 定义绘制区域
        Rect rect = new Rect(0, 0, width, height);
        RectF rectF = new RectF(rect);

        // 3. 第一步：进行圆角裁切 (使用SRC_IN混合模式)
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        // 先画DST（圆角矩形）
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);
        // 再画SRC（原图），应用混合模式
        canvas.drawBitmap(sourceBitmap, rect, rect, paint);
        // 清除混合模式
        paint.setXfermode(null);

        // 4. 第二步：绘制描边
        Paint strokePaint = new Paint();
        strokePaint.setAntiAlias(true);
        strokePaint.setStyle(Paint.Style.STROKE);
        strokePaint.setColor(strokeColor);
        strokePaint.setStrokeWidth(strokeWidth);

        // 计算描边矩形区域（向内收缩，避免描边被裁剪）
        float halfStrokeWidth = strokeWidth / 2;
        RectF strokeRectF = new RectF(
                halfStrokeWidth,
                halfStrokeWidth,
                width - halfStrokeWidth,
                height - halfStrokeWidth
        );
        canvas.drawRoundRect(strokeRectF, cornerRadius, cornerRadius, strokePaint);

        return output;
    }
}

使用方法（在Activity/Fragment中）：

// 假设你有一个ImageView和一个原图Bitmap
ImageView imageView = findViewById(R.id.image_view);
Bitmap originalBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_photo);

// 调用我们的“魔法工厂”
Bitmap resultBitmap = ImageProcessor.createRoundRectBitmapWithStroke(
        originalBitmap, // 原图
        80f,           // 圆角半径80像素
        Color.parseColor("#FF6B9C"), // 描边颜色，一个漂亮的粉色
        15f            // 描边宽度15像素
);

// 展示成果！
imageView.setImageBitmap(resultBitmap);

第四章：化妆师的自我修养（性能与优化）

复用Bitmap：如果是在ListView、RecyclerView中频繁使用，一定要做好Bitmap的复用和缓存，避免频繁创建导致内存抖动（OOM的元凶！）。
异步处理：图片处理是耗时操作，务必在子线程中进行（如AsyncTask、RxJava、Kotlin协程），处理完成后再回到主线程更新UI。
按需加载：根据ImageView的实际显示大小来对原图进行缩放，再进行圆角处理，不要直接拿一张巨无霸高清图来加工，那会卡到你怀疑人生。
尝试新姿势：对于更复杂的场景（比如动态圆角），可以考虑使用BitmapShader，性能更高。但对于我们这种“描边+圆角”的需求，上面的方法在理解和实现上是最直观的。