學習資料:

• Android群英傳

1.PorterDuffXfermode

PorterDuffXfermode有點類似數學中的交集，并集，用來兩個圖像間的混合顯示模式，設置的是兩個圖層交集區域的顯示方式，dst是下層，先畫的圖形；src是上層，后畫的圖形

構造方法：

• PorterDuffXfermode(PorterDuff.Mode mode)

構造方法中只需一個參數，PorterDuff.Mode，Mode是PorterDuff這個類中的一個枚舉類，現在Mode中有18個枚舉值，圖中只有16個，圖少了ADD和OVERLAY

2.PorterDuff.Mode

PorterDuff.Mode錯誤圖

上面的圖是有錯誤的，下面的圖，和我自己測試的結果是一致的。錯誤原因可以去Android中Canvas繪圖之PorterDuffXfermode使用及工作原理詳解看看

修正后的PorterDuff.Mode

最常用的就是DST_IN和SRC_IN，是可以用來實現自定義CircleImageView的一種方式

看圖幫助:后來者居上

• 黃色的圓是DST下層，先進行繪制；
• 藍色的矩形是SRC上層，后進行繪制

PorterDuff.Mode不單單是進行了圖形的操作，有的模式還對色彩有影響

這些模式最好都自己測試一下

具體的過程可以學習愛哥的自定義控件其實很簡單1/6

有的模式，不支持硬件加速，最好關閉硬件加速

繪制過程后來者居上，dst為下層，先進行繪制；src為上層，后進行繪制。

生活中的例子： 雞蛋灌餅 : ）

簡單測試：

PorterDuff.Mode.MULTIPLY

public class PorterDuffView extends View {
    private Paint paint ;
    private RectF rectF;
    private PorterDuffXfermode porterDuffXfermode;
    public PorterDuffView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    private void initPaint() {
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);//關閉硬件加速
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        rectF = new RectF(150,150,500,500);
       porterDuffXfermode = new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY);
    }

    @Override
  protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //繪制背景色
        canvas.drawColor(Color.YELLOW);
        //創建一個新的畫布Layer
        int layerId = canvas.saveLayer(0, 0, getWidth(),getHeight() , null, Canvas.ALL_SAVE_FLAG);
        //繪制dst層
        float x = getWidth() / 4;
        float y = getHeight() / 4;
        float radius = Math.min(getWidth(), getHeight()) / 4;
        paint.setColor(Color.CYAN);
        canvas.drawCircle(x, y, radius, paint);
        //設置混合模式
         paint.setColor(Color.RED);
        paint.setXfermode(porterDuffXfermode);
        //繪制src層
        canvas.drawRect(rectF,paint);
        paint.setXfermode(null);
        canvas.restoreToCount(layerId);//將自己創建的畫布Layer繪制到畫布默認的Layer
    }


    /**
     * 測量
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        if (wSpecMode == MeasureSpec.AT_MOST && hSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, 300);
        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, hSpecSize);
        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(wSpecSize, 300);
        }
    }
}

之所以更改圖層是為了讓繪制不受背景色影響。將繪制的圓形和矩形在一個新的圖層繪制，繪制完成后，再把新的圖層加入到Canvas的默認圖層。

3.CircleImageView

如果只是單單為了顯示一個圓形的圖片，可以有好多種辦法。

可以借助PorterDuffXfermode或者v4包下的RoundedBitmapDrawable進行把Biamp進行形狀上的改變得到圓形

若不是經常大量的頻繁的顯示出一個圓形圖片，也可以利用CardView，Android 一個另類的顯示圓形圖片方式

本篇為了學習PorterDuffXfermode就使用前面提到的PorterDuff.Mode.SRC_IN

簡單實踐：

圓形圖片

public class CircleImageView extends ImageView {

    private Paint mPaint;

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();

    }

    private void initPaint() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        BitmapDrawable drawable = (BitmapDrawable) getDrawable();
        if (drawable != null) {
            Bitmap bitmap = drawable.getBitmap();
            drawTargetBitmap(canvas, bitmap);
        } 
    }


    private void drawTargetBitmap(Canvas canvas, Bitmap bitmap) {
        final int sc = canvas.saveLayer(0, 0, getWidth(),getHeight(), null, Canvas.ALL_SAVE_FLAG);
        //先繪制dst層
        final float x = getWidth() / 2;
        final float y = getHeight() / 2;
        final float radius = Math.min(getWidth(), getHeight()) / 2;
        canvas.drawCircle(x, y, radius, mPaint);
        //設置混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        //繪制src層
        final float f_x = getWidth()  / 2 -bitmap.getWidth() / 2;
        final float f_y = getHeight() / 2 -bitmap.getHeight() / 2;
        canvas.drawBitmap(bitmap, f_x,f_y, mPaint);
        // 還原混合模式
        mPaint.setXfermode(null);
        // 還原畫布
        canvas.restoreToCount(sc);
    }
}

一個超級簡單的自定義CircleImageView

4.最后

簡單介紹完畢，主要就是18種模式的理解，最好每種模式的效果都能夠明白，掌握最常用的DST_IN和SRC_IN

進一步學習，可以看鴻洋大神的Android 自定義控件實現刮刮卡效果 真的就只是刮刮卡么

5. 補充

9月9號 晚上

關于PorterDuffXfermode的坑總結的很好，PorterDuffXfermode不正確的真正原因

本人還很菜，有錯誤，請指出

共勉 : )