你有幾種方案實(shí)現(xiàn)圓角圖片？

茴香豆的茴有幾種寫法？這不需探究，也沒有意義。本文探究的是圓角圖片有幾種實(shí)現(xiàn)方案，這應(yīng)該是有意義的。

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

第一種方案是利用色彩混合PorterDuffXfermode繪制Path，其原理是根據(jù)數(shù)學(xué)公式對目標(biāo)對象(原始圖片)和源對象(圓角矩形)進(jìn)行混合顯示，混合模式PorterDuff.Mode共有18種，需要能夠看懂這18種混合模式的數(shù)學(xué)公式的含義。
我們要使用的是PorterDuff.Mode.DST_IN，其實(shí)只要看懂了PorterDuff.Mode.DST_IN的數(shù)學(xué)公式的含義，其他17種的含義也就很好理解了。PorterDuff.Mode.DST_IN語言解釋是這樣的：兩者相交的地方繪制目標(biāo)對象，不相交的地方不進(jìn)行繪制，并且相交處的效果會受到源對象對應(yīng)地方透明度的影響。這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+畫布剪切

第二種方案使用到了兩個知識點(diǎn)，一個知識點(diǎn)是調(diào)節(jié)矩陣Matrix并賦給Shader，再把Shader賦給Paint，最后利用Paint和Canvas繪制原來的Bitmap，在此之前可以繪制背景，在此之后可以繪制邊框，這需要對矩陣Matrix、Shader、線性代數(shù)運(yùn)算等有所了解。另一個知識點(diǎn)是Canvas的剪切，根據(jù)矩形區(qū)域mDrawableRect和八個半徑數(shù)組clipRadii構(gòu)造一個Path path，利用這個path對畫布進(jìn)行剪切，這里只需要三行代碼：

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，這種方案貌似只能實(shí)現(xiàn)統(tǒng)一的圓角半徑，四個單一的圓角半徑貌似做不到。代碼使用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

可以看到時間差別不是很大。

如果還有其他方案，請留言，文章會隨時更新。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容