最近被人問起圓角圖片的實現，花了一點時間鼓搗了下，下面簡單分享下。

先上效果圖

下面為主要原始碼，實現了 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