最近被人问起圆角图片的实现，花了一点时间鼓捣了下，下面简单分享下。
完整例子: RoundImage
先上效果图
全部为圆角.jpg
顶部为圆角.jpg
底部为圆角.jpg
只有左上角为圆角.jpg
下面为主要源码，实现了 Picasso 中的 Transformation 接口。
public class RoundCornersTransformation implements Transformation {
private float mRadius;
private DrawCornerImage mDrawCornerImage;
private Paint mPaint;
public RoundCornersTransformation(float radius, DrawCornerImage drawCornerImage) {
mRadius = radius;
mDrawCornerImage = drawCornerImage;
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
public Bitmap transform(Bitmap source) {//这里为主要逻辑，原理可以套用在其他地方，比如 Glide
int width = source.getWidth();
int height = source.getHeight();
Bitmap newSource = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newSource);
mPaint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));
source.recycle();
//画圆角的逻辑代码，交给 DrawCornerImage 接口的具体实现类
mDrawCornerImage.drawCornerImage(canvas, mPaint, mRadius, width, height);
return newSource;
}
@Override
public String key() {
return RoundCornersTransformation.class.toString();
}
}
定义 DrawCornerImage 接口将变化的部分抽离出来
public interface DrawCornerImage {
void drawCornerImage(Canvas canvas, Paint paint,float radius, int right, int bottom);
}
DrawTopCornerImage 为 DrawCornerImage 的一个实现类，负责具体的圆角逻辑：只有顶部为圆角
public class DrawTopCornerImage implements DrawCornerImage {
@Override
public void drawCornerImage(Canvas canvas, Paint paint, float radius, int right, int bottom) {
//绘制一个全部圆角的矩形区域长宽分别为 right 和 bottom
canvas.drawRoundRect(new RectF(0, 0, right, bottom), radius, radius, paint);
//绘制一个矩形长宽分别为 right 和 bottom-radius，相当于底部和上面对齐而高度差个 radius, 和上面所绘制的并集，即为图片的可见区域。并集即为上部为圆角而底部是直角的一个区域
canvas.drawRect(new RectF(0, radius, right, bottom), paint);
}
}
原理简单来讲，就是所绘制区域的并集为可见区域，注意是并集不是交集。
使用起来还是比较方便的:
Picasso.with(this)
.load(R.drawable.ic_girl)
.transform(new RoundCornersTransformation(corner, new DrawTopLeftCornerImage()))// here change draw strategy：DrawAllCornerImage ,DrawBottomCornerImage etc.
.into(iv);
其他的圆角逻辑可以自行发挥，上面的原理不局限于 Picasso 完全也可以用在 Glide 或则其他地方，结合图片库的封装可以对上面继续进行一次封装。
有一点提一下如果你的 ImageView 有用 android:scaleType="centerCrop" 属性，可能上面方法就有点不合适了，centerCrop 属性会截取图片的中心区域展示很可能圆角就不在展示范围了。但是大多场景 UI 给出的设计尺寸和图片比例应该是一致的，上面的适用范围还是很大的。
如果你想达到 centerCrop 属性的效果，也不是不可以，只是不适合封装在 Picasso 的内部逻辑中了。因为我们需要知道 ImageView 的宽高，这其实更合适封装成一个自定义 View。
下面还是直接以上面的代码，写个示例，并不合适使用在实际项目中，仅为了说明原理。
@Override
public Bitmap transform(Bitmap source) {
float ivWidth = 600;//600 在我测试机中 ImageView 的像素大小
float ivHeight = 600;//600 在我测试机中 ImageView 的像素大小
int width = source.getWidth();
int height = source.getHeight();
//按照 ImageView 的大小创建一个 Bitmap
Bitmap newSource = Bitmap.createBitmap(ivWidth , ivHeight , Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(newSource);
BitmapShader bitmapShader = new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale;
// ImageView 和原图片的宽高比，取其大值为了放大后能够完全覆盖 ImageView 的大小
scale = Math.max(ivWidth / width, ivHeight / height);
//利用 Matrix 矩阵进行缩放和居中操作
mShaderMatrix.reset();
mShaderMatrix.setScale(scale, scale);
//将放大后的图片向上移动，达到中心位置（实际情况根据图片的各种大小，有可能也会在 x 轴方向进行移动，这里仅作示例演示）
mShaderMatrix.postTranslate(0, -(height * scale - ivHeight) / 2.0f);
bitmapShader.setLocalMatrix(mShaderMatrix);
mPaint.setShader(bitmapShader);
source.recycle();
mDrawCornerImage.drawCornerImage(canvas, mPaint, mRadius, ivWidth, ivHeight);
return newSource;
}
下图为和开源控件 RoundedImageView 的效果对比
QQ图片20170425144636.jpg
大家阅读它的源码会发现原理是一样的，大家有什么其他需要可以直接使用
RoundedImageView
