SuperImageView 圆角实现原理：Path 裁剪与 Xfermode 混合模式的深度解读

SuperImageView 圆角实现原理：Path 裁剪与 Xfermode 混合模式的深度解读

【免费下载链接】SuperImageView Crop and Rounded Corners added to an ImageView. 项目地址: https://gitcode.com/gh_mirrors/su/SuperImageView

在 Android 开发中，给图片加"圆角"是最常见的 UI 需求之一，但很多新手面对 ImageView 时常常无从下手：直接设置 src 后图片是方方正正的，四个角怎么也"切"不圆。SuperImageView 正是一个专门解决这类问题的开源库，它的定位非常纯粹——在普通 ImageView 之上增加 Crop（裁剪） 和 Rounded Corners（圆角） 两大能力。这篇文章不堆代码，而是带你看懂 SuperImageView 圆角功能背后的核心原理：Path 路径裁剪 与 Xfermode 混合模式 是如何配合，把一张普通图片"抠"成圆角的。

一张天然的圆形素材：圆角处理常用于头像、卡片封面、商品图等场景

圆角图片为什么难做：先理解 Android 的绘制流程

要理解 SuperImageView 的实现，先要回答一个基础问题：为什么圆角这么"小"的需求，实现起来却不简单？

原因有三点：

1. ImageView 本身不提供圆角：系统自带的裁剪只有 centerCrop、fitXY 等矩形缩放模式，没有"切角"能力；
2. 图片是矩形的位图：位图数据天生是规整的矩形像素块，想要圆角，本质是告诉系统"哪些像素画、哪些像素不画"；
3. 要对抗锯齿：硬生生砍掉四个角会产生难看的锯齿，必须开启抗锯齿（ANTI_ALIAS）。

理解了这三点，再看 SuperImageView 的方案就豁然开朗了——它的思路是：先画一张正常的图片，再用"遮罩"把四个角挖掉。

SuperImageView 圆角功能的整体架构：一次优雅的解耦

SuperImageView 把"圆角"设计成了可插拔的功能模块，而不是写死在 ImageView 里。它的核心设计你可以在 SuperImageView.java 中看到：

• SuperImageView 继承自 AppCompatImageView，本身只负责"组装"；
• 它定义了 RoundedCorners 接口（见 RoundedCorners.java），接口里只有三个方法：setup()（初始化）、onDraw()（绘制圆角）、onLayoutChanged()（布局变化回调）；
• 真正的圆角实现是 RoundedCornersImage.java，它通过构造器注入的方式被 SuperImageView 加载。

在 SuperImageView 的 onDraw() 中，只需一行委托：先调用父类把图片正常画出来，再调用 roundedCorners.onDraw(canvas) 对画布做"圆角处理"。这种面向接口的设计，让裁剪和圆角两个功能互不干扰，非常值得学习。

圆角第一步：用 Path 构建圆角裁剪路径

实现圆角的第一个关键技术是 Path（路径）。Path 是 Android 中描述"任意形状轮廓"的对象，圆角矩形恰好可以用"四条直线 + 四段 90° 圆弧"精确描述。

在 RoundedCornersImage 中，路径的构建逻辑一目了然：

1. 从左上角出发，moveTo() 到第一个圆角的起点；
2. 沿上边画直线到右上角圆弧处，用 arcTo() 画一段 90° 圆弧；
3. 依次处理右下角、左下角、左上角，最后 close() 闭合路径。

每一段圆弧都用 RectF 计算出外接矩形，圆弧的半径正是我们设置的圆角半径。代码里用 float[] cornerRadius 数组分别保存四个角（顺序对应 Corner.java 中定义的 TOP_LEFT=0、TOP_RIGHT=1、BOTTOM_LEFT=2、BOTTOM_RIGHT=3），所以它天然支持"只圆一个角"这种精细控制。

聪明的读者可能已经发现：路径只是"形状描述"，它本身并不会让图片变圆。真正让图片"消失四个角"的，是下一步的混合模式。

圆角第二步：Xfermode 混合模式如何"挖掉"四个角

这就是标题中的第二个主角—— Xfermode（混合模式）。简单说，混合模式决定了"两张图重叠时，像素如何叠加"。SuperImageView 用到了 PorterDuffXfermode，它源自经典的 Porter-Duff 合成算法，常见模式包括 SRC_IN、DST_IN、DST_OUT 等。

在 RoundedCornersImage.java 的 onDraw() 里，核心动作只有一行：canvas.drawPath(clipPath, clipPaint)，用带混合模式的画笔把路径画到画布上。妙处在于：

• DST_OUT（保留目标中不重合的部分）：相当于"擦除"圆角路径之外的像素，把四个角从图片上"挖"掉；
• DST_IN（只保留与源重合的部分）：相当于"只显示"路径内部的像素，效果同样是只留圆角内部。

这正是很多新手卡住的地方：明明画了 Path，图片却没有圆角，原因就是漏掉了混合模式这一步。同时 SuperImageView 还做了版本适配（见下方表格），确保新旧系统行为一致。

版本适配与硬件加速：一个容易踩的坑

细心的读者在源码里会看到一个很"讲究"的分支判断——它把 Android 8.1（O_MR1）作为分界线，两种策略完全不同：

这段逻辑也解释了另一个常见坑：Xfermode 依赖 setLayerType() 设置图层类型。因为混合模式的"挖角"操作需要先在独立图层上完成，再合成到屏幕上；如果不设置图层类型，某些模式下圆角会失效，甚至出现黑边。SuperImageView 在每个分支里都调用了 view.setLayerType(...)，这正是"知其然也知其所以然"的体现。

另外，源码里还有一处性能优化值得留意：clipPath 的构建被放在 if (canvasBounds.width() != canvas.getWidth() && ...) 的判断里，也就是说只有画布尺寸变化时才重建路径，尺寸不变时直接复用，避免了重复计算。

圆角半径怎么配：从 XML 到代码的完整链路

SuperImageView 的圆角能力使用起来非常直观。你可以在布局中这样配置：

<com.codeforvictory.android.superimageview.SuperImageView
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:src="@drawable/photo"
    custom:siv_cornerRadius="16dp" />

如果只想圆某一个角，可以用 siv_cornerRadiusTopLeft、siv_cornerRadiusTopRight、siv_cornerRadiusBottomLeft、siv_cornerRadiusBottomRight 单独指定。这些属性定义在 attrs.xml 中，最终在 RoundedCornersImage.setup() 里通过 TypedArray 读出来，写入 cornerRadius 数组，驱动上面的 Path 构建。整个链路：XML 属性 → TypedArray → cornerRadius 数组 → Path 圆弧 → Xfermode 挖角 → 圆角图片，一气呵成。

配套的示例代码在 RoundedCornerImagesActivity.java，想亲手验证效果可以直接跑 sample 模块。

总结：从"能用"到"懂原理"的三个要点

回到文章标题的问题：SuperImageView 的圆角到底是怎么实现的？用一句话概括——用 Path 精确描述圆角轮廓，再用 Xfermode 混合模式把轮廓之外的像素挖掉，最后通过版本分支与图层类型设置保证各系统上的表现一致。

对新手来说，这篇文章希望帮你建立的认知是：

1. 圆角 = 形状（Path）+ 遮罩（Xfermode），两者缺一不可；
2. 混合模式有版本差异，别忘记 setLayerType；
3. 复用一个开源库时，读一读它的核心实现（比如这里的 RoundedCornersImage），比死记 API 更有价值。

下次你再看到圆角图片，不妨想想它背后那条 moveTo → lineTo → arcTo → close 的路径，以及那句决定成败的 PorterDuffXfermode——这就是 Android 绘图的魅力所在。😊

【免费下载链接】SuperImageView Crop and Rounded Corners added to an ImageView. 项目地址: https://gitcode.com/gh_mirrors/su/SuperImageView