茴香豆的茴有几种写法？这不需探究，也没有意义。本文探究的是圆角图片有几种实现方案，这应该是有意义的。

方案一：色彩混合+绘制Path

第一种方案是利用色彩混合PorterDuffXfermode绘制Path，其原理是根据数学公式对目标对象(原始图片)和源对象(圆角矩形)进行混合显示，混合模式PorterDuff.Mode共有18种，需要能够看懂这18种混合模式的数学公式的含义。
我们要使用的是PorterDuff.Mode.DST_IN，其实只要看懂了PorterDuff.Mode.DST_IN的数学公式的含义，其他17种的含义也就很好理解了。PorterDuff.Mode.DST_IN语言解释是这样的：两者相交的地方绘制目标对象，不相交的地方不进行绘制，并且相交处的效果会受到源对象对应地方透明度的影响。这18种模式在Android矢量图(二)--VectorDrawable所有属性全解析这篇文章中介绍的很清晰。

下面看下RRImageOne.java的源码：

public class RRImageOne extends AppCompatImageView {
    long time = System.currentTimeMillis();
    private int cornerRadius; // Set the radius of rounded corners uniformly, priority is higher than setting the radius of each corner separately.
    private int cornerTopLeftRadius, cornerTopRightRadius, cornerBottomLeftRadius, cornerBottomRightRadius;

    private float[] srcRadii = new float[8];
    private RectF srcRectF = new RectF();

    private Paint paint = new Paint();;
    private Path path;
    public RRImageOne(Context context) {
        this(context, null);
    }

    public RRImageOne(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RRImageOne(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RRImageOne, 0, 0);
        cornerRadius = ta.getDimensionPixelSize(R.styleable.RRImageOne_corner_r, cornerRadius);
        cornerTopLeftRadius = ta.getDimensionPixelSize(R.styleable.RRImageOne_corner_top_left_r, cornerTopLeftRadius);
        cornerTopRightRadius = ta.getDimensionPixelSize(R.styleable.RRImageOne_corner_top_right_r, cornerTopRightRadius);
        cornerBottomLeftRadius = ta.getDimensionPixelSize(R.styleable.RRImageOne_corner_bottom_left_r, cornerBottomLeftRadius);
        cornerBottomRightRadius = ta.getDimensionPixelSize(R.styleable.RRImageOne_corner_bottom_right_r, cornerBottomRightRadius);
        ta.recycle();

        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

        //init radii
        if (cornerRadius > 0) {
            for (int i = 0; i < srcRadii.length; i++) {
                srcRadii[i] = cornerRadius;
            }
        } else {
            srcRadii[0] = srcRadii[1] = cornerTopLeftRadius;
            srcRadii[2] = srcRadii[3] = cornerTopRightRadius;
            srcRadii[4] = srcRadii[5] = cornerBottomRightRadius;
            srcRadii[6] = srcRadii[7] = cornerBottomLeftRadius;
        }
        //change bg
        Drawable bg = getBackground();
        if (bg instanceof ColorDrawable) {
            GradientDrawable sd = new GradientDrawable();
            sd.setCornerRadii(srcRadii);
            sd.setColor(((ColorDrawable) bg).getColor());
            setBackgroundDrawable(sd);
        }
        setScaleType(ScaleType.CENTER_CROP);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        srcRectF.set(0, 0, w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.saveLayer(srcRectF, null, Canvas.ALL_SAVE_FLAG);//or bg will have black edge
        super.onDraw(canvas);
        path = new Path();
        path.addRoundRect(srcRectF, srcRadii, Path.Direction.CCW);

        canvas.drawPath(path, paint);

        canvas.restore();
        Log.d("zzh", "one: time consume="+(System.currentTimeMillis()-time));
    }
}

Activity的页面布局源码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:padding="4dp"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content">
        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            android:layout_marginRight="4dp"
            app:corner_r="20dp" />

        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            android:layout_marginRight="4dp"
            app:corner_r="45dp" />
        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:src="@drawable/dragon"
            android:background="@android:color/holo_blue_bright"
            app:corner_bottom_left_r="10dp"
            app:corner_bottom_right_r="60dp"
            app:corner_top_left_r="60dp"
            app:corner_top_right_r="10dp" />
    </LinearLayout>

    <com.fs.RoundImage.one.RRImageOne
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@android:color/holo_blue_bright"
        android:src="@drawable/dragon"
        android:layout_marginLeft="4dp"
        android:layout_gravity="center_horizontal"
        app:corner_r="45dp" />
</LinearLayout>

自定义的style：

    <declare-styleable name="RRImageOne">
        <attr name="corner_r" format="dimension" />
        <attr name="corner_top_left_r" format="dimension" />
        <attr name="corner_top_right_r" format="dimension" />
        <attr name="corner_bottom_left_r" format="dimension" />
        <attr name="corner_bottom_right_r" format="dimension" />
    </declare-styleable>

效果展示：

方案一

方案二：Matrix+Shader+画布剪切

第二种方案使用到了两个知识点，一个知识点是调节矩阵Matrix并赋给Shader，再把Shader赋给Paint，最后利用Paint和Canvas绘制原来的Bitmap，在此之前可以绘制背景，在此之后可以绘制边框，这需要对矩阵Matrix、Shader、线性代数运算等有所了解。另一个知识点是Canvas的剪切，根据矩形区域mDrawableRect和八个半径数组clipRadii构造一个Path path，利用这个path对画布进行剪切，这里只需要三行代码：

Path path = new Path();
path.addRoundRect(mDrawableRect, clipRadii, Path.Direction.CCW);
canvas.clipPath(path);

RRImageTwo.java源码：

public class RRImageTwo extends AppCompatImageView {
    long time = System.currentTimeMillis();
    private final RectF mDrawableRect = new RectF();

    private float[] clipRadii = new float[8];

    private int cornerRadius; // Set the radius of rounded corners uniformly, priority is higher than setting the radius of each corner separately.
    private int cornerTopLeftRadius, cornerTopRightRadius, cornerBottomLeftRadius, cornerBottomRightRadius;

    private final Matrix mShaderMatrix = new Matrix();

    private final Paint mBitmapPaint = new Paint();

    private final Paint mBgPaint = new Paint();
    private int mBgColor = Color.TRANSPARENT;

    private Bitmap mBitmap;
    private BitmapShader mBitmapShader;
    private int mBitmapWidth;
    private int mBitmapHeight;

    private float mDrawableRadius;

    private boolean mReady;
    private boolean mSetupPending;

    public RRImageTwo(Context context) {
        this(context, null);
    }

    public RRImageTwo(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RRImageTwo(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RRImageTwo, defStyle, 0);
        mBgColor = ta.getColor(R.styleable.RRImageTwo_civ_fill_color, mBgColor);
        cornerRadius = ta.getDimensionPixelSize(R.styleable.RRImageTwo_civ_corner_r, cornerRadius);
        cornerTopLeftRadius = ta.getDimensionPixelSize(R.styleable.RRImageTwo_civ_corner_top_left_r, cornerTopLeftRadius);
        cornerTopRightRadius = ta.getDimensionPixelSize(R.styleable.RRImageTwo_civ_corner_top_right_r, cornerTopRightRadius);
        cornerBottomLeftRadius = ta.getDimensionPixelSize(R.styleable.RRImageTwo_civ_corner_bottom_left_r, cornerBottomLeftRadius);
        cornerBottomRightRadius = ta.getDimensionPixelSize(R.styleable.RRImageTwo_civ_corner_bottom_right_r, cornerBottomRightRadius);
        ta.recycle();
//        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        init();
    }

    private void init() {
        if (cornerRadius > 0) {
            for (int i = 0; i < clipRadii.length; i++) {
                clipRadii[i] = cornerRadius;
            }
        } else {
            clipRadii[0] = clipRadii[1] = cornerTopLeftRadius;
            clipRadii[2] = clipRadii[3] = cornerTopRightRadius;
            clipRadii[4] = clipRadii[5] = cornerBottomRightRadius;
            clipRadii[6] = clipRadii[7] = cornerBottomLeftRadius;
        }
        mReady = true;
        if (mSetupPending) {
            setup();
            mSetupPending = false;
        }
    }

    @Override
    public void setAdjustViewBounds(boolean adjustViewBounds) {
        if (adjustViewBounds) {
            throw new IllegalArgumentException("adjustViewBounds not supported.");
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.saveLayer(mDrawableRect, null, Canvas.ALL_SAVE_FLAG);
//        canvas.save();
        Path path = new Path();
        path.addRoundRect(mDrawableRect, clipRadii, Path.Direction.CCW);
        canvas.clipPath(path);

        drawBg(canvas);
        drawBitmap(canvas);
        drawBorder(canvas);

        canvas.restore();
        Log.d("zzh", "two: time consume="+(System.currentTimeMillis()-time));
    }

    void drawBg(Canvas canvas) {
        if (mBgColor != Color.TRANSPARENT) {
            float largeEdge = Math.max(getWidth(), getHeight());
            canvas.drawCircle(getWidth() / 2.0f, getHeight() / 2.0f, largeEdge, mBgPaint);
        }
    }
    void drawBitmap(Canvas canvas) {
        if (mBitmap != null) {
            float largeEdge = Math.max(getWidth(), getHeight());
            canvas.drawCircle(getWidth() / 2.0f, getHeight() / 2.0f, largeEdge, mBitmapPaint);
        }
    }
    void drawBorder(Canvas canvas) {
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Log.d("zzh", "onSizeChanged: mBgPaint=" + mBgPaint);
        setup();
    }

    private void setup() {
        Log.d("zzh", "setup: mBgPaint="+mBgPaint);
        if (mBgPaint != null) {//这里会报空指针crash，想不明白，请大神留言告知
            mBgPaint.setStyle(Paint.Style.FILL);
            mBgPaint.setAntiAlias(true);
            mBgPaint.setColor(mBgColor);
        }
        if (!mReady) {
            mSetupPending = true;
            return;
        }

        if (getWidth() == 0 && getHeight() == 0) {
            return;
        }

        mDrawableRect.set(0, 0, getWidth(), getHeight());
        mDrawableRadius = Math.min(mDrawableRect.height() / 2.0f, mDrawableRect.width() / 2.0f);

        if (mBitmap != null) {
            mBitmapShader = new BitmapShader(mBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mBitmapPaint.setAntiAlias(true);
            mBitmapPaint.setShader(mBitmapShader);
            mBitmapHeight = mBitmap.getHeight();
            mBitmapWidth = mBitmap.getWidth();
            updateShaderMatrix();
        }
        invalidate();
    }

    private void updateShaderMatrix() {
        float scale;
        float dx = 0;
        float dy = 0;

        mShaderMatrix.set(null);
        if (mBitmapWidth * mDrawableRect.height() > mDrawableRect.width() * mBitmapHeight) {
            scale = mDrawableRect.height() / (float) mBitmapHeight;
            dx = (mDrawableRect.width() - mBitmapWidth * scale) * 0.5f;
        } else {
            scale = mDrawableRect.width() / (float) mBitmapWidth;
            dy = (mDrawableRect.height() - mBitmapHeight * scale) * 0.5f;
        }
        Log.d("zzh", "mBitmapWidth="+mBitmapWidth+  " mBitmapHeight="+mBitmapHeight+ " drawableWidth=" + mDrawableRect.width() + " drawableHeight" + mDrawableRect.height() + " scale="+scale);
        mShaderMatrix.setScale(scale, scale);
        mShaderMatrix.postTranslate((int) (dx + 0.5f) + mDrawableRect.left, (int) (dy + 0.5f) + mDrawableRect.top);
        mBitmapShader.setLocalMatrix(mShaderMatrix);
    }

    @Override
    public void setImageBitmap(Bitmap bm) {
        super.setImageBitmap(bm);
        mBitmap = bm;
        setup();
        Log.d("zzh", "setImageBitmap: ");
    }

    @Override
    public void setImageDrawable(Drawable drawable) {
        super.setImageDrawable(drawable);
        mBitmap = getBitmapFromDrawable(drawable);
        setup();
        Log.d("zzh", "setImageDrawable: ");
    }

    @Override
    public void setImageResource(int resId) {
        super.setImageResource(resId);
        mBitmap = getBitmapFromDrawable(getDrawable());
        setup();
        Log.d("zzh", "setImageResource: ");
    }

    @Override
    public void setImageURI(Uri uri) {
        super.setImageURI(uri);
        mBitmap = uri != null ? getBitmapFromDrawable(getDrawable()) : null;
        setup();
        Log.d("zzh", "setImageURI: ");
    }

    private static final Bitmap.Config BITMAP_CONFIG = Bitmap.Config.ARGB_8888;
    private static final int COLORDRAWABLE_DIMENSION = 2;
    private Bitmap getBitmapFromDrawable(Drawable drawable) {
        if (drawable == null) {
            return null;
        }

        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        try {
            Bitmap bitmap;

            if (drawable instanceof ColorDrawable) {
                bitmap = Bitmap.createBitmap(COLORDRAWABLE_DIMENSION, COLORDRAWABLE_DIMENSION, BITMAP_CONFIG);
            } else {
                bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), BITMAP_CONFIG);
            }

            Canvas canvas = new Canvas(bitmap);
            drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
            drawable.draw(canvas);
            return bitmap;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

}

页面布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:padding="4dp">

        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:layout_marginRight="4dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            app:corner_r="20dp"/>

        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:layout_marginRight="4dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            app:corner_r="45dp"/>

        <com.fs.RoundImage.one.RRImageOne
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            app:corner_bottom_left_r="10dp"
            app:corner_bottom_right_r="60dp"
            app:corner_top_left_r="60dp"
            app:corner_top_right_r="10dp"/>
    </LinearLayout>

    <com.fs.RoundImage.one.RRImageOne
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginLeft="4dp"
        android:background="@android:color/holo_blue_bright"
        android:src="@drawable/dragon"
        app:corner_r="45dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.fs.RoundImage.two.RRImageTwo
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="4dp"
            android:src="@drawable/dragon"
            app:civ_border_color="#FF7F24"
            app:civ_border_width="10dp"
            app:civ_corner_r="45dp"
            app:civ_fill_color="@android:color/holo_blue_bright"/>

        <com.fs.RoundImage.two.RRImageTwo
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="4dp"
            android:src="@drawable/dragon"
            app:civ_border_color="#FF7F24"
            app:civ_border_width="10dp"
            app:civ_corner_r="45dp"
            app:civ_fill_color="@android:color/holo_blue_bright"/>

        <com.fs.RoundImage.two.RRImageTwo
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="4dp"
            app:civ_border_color="#FF7F24"
            app:civ_border_width="10dp"
            app:civ_corner_r="45dp"
            app:civ_fill_color="@android:color/holo_blue_bright"/>
    </LinearLayout>

    <com.fs.RoundImage.two.RRImageTwo
        android:layout_width="120dp"
        android:layout_height="90dp"
        android:src="@drawable/dragon"
        app:civ_corner_bottom_left_r="10dp"
        app:civ_corner_bottom_right_r="60dp"
        app:civ_corner_top_left_r="60dp"
        app:civ_corner_top_right_r="10dp"
        app:civ_fill_color="@android:color/holo_blue_bright"/>
</LinearLayout>

自定义的style：

    <declare-styleable name="RRImageTwo">
        <attr name="civ_corner_r" format="dimension" />
        <attr name="civ_corner_top_left_r" format="dimension" />
        <attr name="civ_corner_top_right_r" format="dimension" />
        <attr name="civ_corner_bottom_left_r" format="dimension" />
        <attr name="civ_corner_bottom_right_r" format="dimension" />

        <attr name="civ_border_width" format="dimension" />
        <attr name="civ_border_color" format="color" />
        <attr name="civ_border_overlay" format="boolean" />
        <attr name="civ_fill_color" format="color" />
    </declare-styleable>

方案二

方案三：ViewOutlineProvider

第三种方案是利用ViewOutlineProvider，这种方案貌似只能实现统一的圆角半径，四个单一的圆角半径貌似做不到。代码使用kotlin编写，源码如下：RRImageThree.kt：

class RRImageThree @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {
    var cornerRadius = 0f
    internal var time = System.currentTimeMillis()
    init {
        clipToOutline = true
        val ta = context.obtainStyledAttributes(attrs, R.styleable.RRImageThree, defStyleAttr, 0)
        cornerRadius = ta.getDimensionPixelSize(R.styleable.RRImageThree_c_corner_r, cornerRadius.toInt()).toFloat()
        scaleType = ScaleType.CENTER_CROP
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        var outlineProvider: ViewOutlineProvider = object : ViewOutlineProvider() {
            override fun getOutline(view: View?, outline: Outline?) {
                outline?.setRoundRect(Rect(0, 0, w, h), cornerRadius)
            }
        }
        this.outlineProvider = outlineProvider
//        invalidateOutline()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        Log.d("zzh", "three: time consume=" + (System.currentTimeMillis() - time))
    }
}

样式style：

    <declare-styleable name="RRImageThree">
        <attr name="c_corner_r" format="dimension" />
        <attr name="c_corner_top_left_r" format="dimension" />
        <attr name="c_corner_top_right_r" format="dimension" />
        <attr name="c_corner_bottom_left_r" format="dimension" />
        <attr name="c_corner_bottom_right_r" format="dimension" />
    </declare-styleable>

布局源码：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:orientation="horizontal">

        <com.fs.RoundImage.three.RRImageThree
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="4dp"
            android:background="@android:color/holo_blue_bright"
            android:src="@drawable/dragon"
            app:c_corner_r="45dp"/>

        <com.fs.RoundImage.three.RRImageThree
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_gravity="center_horizontal"
            android:background="@android:color/holo_blue_bright"
            android:layout_marginLeft="4dp"
            android:src="@drawable/dragon"
            app:c_corner_r="45dp"/>

        <com.fs.RoundImage.three.RRImageThree
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:background="@android:color/holo_blue_bright"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="4dp"
            android:src="@drawable/dragon"
            app:c_corner_r="45dp"/>
    </LinearLayout>

最终效果图：

方案三

比较

最后比较了三种方案的时间性能：

zzh: one: time consume=296
zzh: one: time consume=294
zzh: one: time consume=294
zzh: one: time consume=287
zzh: two: time consume=286
zzh: two: time consume=285
zzh: two: time consume=285
zzh: three: time consume=283
zzh: three: time consume=284
zzh: three: time consume=284

可以看到时间差别不是很大。

如果还有其他方案，请留言，文章会随时更新。