Android教程網 >> Android技術 >> 關於Android編程 >> Android基礎入門教程——8.3.5 Paint API之—— Xfermode與PorterDuff詳解(二)

Android基礎入門教程——8.3.5 Paint API之—— Xfermode與PorterDuff詳解(二)

編輯：關於Android編程

本節引言：

上一節，我們學習了Xfermode兩個已經過世(過時)的兒子：AvoidXfermode， PixelXorXfermode，
雖然說有點用，但是終歸是被淘汰的了，本節我們來學習Xfermode還健在的三兒子：PorterDuffXfermode；
先祭上官方API文檔：PorterDuffXfermode！文檔內容很少，我們可以看到他的構造方法：

參數只有一個：PorterDuff.Mode mode，而Android給我們提供了16種圖片混排模式，簡單點可以
理解為兩個圖層按照不同模式，可以組合成不同的結果顯示出來！16種混排模式的結果圖如下：

這裡兩個圖層：先繪制的圖是目標圖(DST)，後繪制的圖是源圖(SRC)！
當然，在文檔中我們發現可供使用的模式並不是16種，而是18種，新增了ADD和OVERLAY兩種模式!
嗯，說多也白說，代碼最實際，本節我們寫下代碼來驗證下這18種模式吧！
PS:這個PorterDuff的命名其實是兩個人名的組合：Tomas Proter和 Tom Duff組成的，他們是最早在
最早在SIGGRAPH上提出圖形混合概念的大神級人物，有興趣的自行百度~

寫個例子來驗證上面的這個圖：

好的，我們來寫個例子驗證下上面這個圖，通過修改不同的模式，來對結果進行對比分析！

代碼實現：

Step 1：我們先寫個獲取屏幕寬高的工具類吧！ScreenUtil.java：

/**
 * Created by Jay on 2015/10/23 0023.
 */
public class ScreenUtil {
    /**
     * 獲取屏幕寬高，sdk17後不建議采用
     *
     * @param context
     */
    public static int[] getScreenHW(Context context) {
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        Display display = manager.getDefaultDisplay();
        int width = display.getWidth();
        int height = display.getHeight();
        int[] HW = new int[] { width, height };
        return HW;
    }

    /**
     * 獲取屏幕寬高，建議采用
     *
     * @param context
     */
    public static int[] getScreenHW2(Context context) {
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics dm = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(dm);
        int width = dm.widthPixels;
        int height = dm.heightPixels;
        int[] HW = new int[] { width, height };
        return HW;
    }

    /**
     * 獲取屏幕的寬度
     *
     * @param context
     * @return
     */
    public static int getScreenW(Context context) {
        return getScreenHW2(context)[0];
    }

    /**
     * 獲取屏幕的高度
     *
     * @param context
     * @return
     */
    public static int getScreenH(Context context) {
        return getScreenHW2(context)[1];
    }
}

Step 2：編寫我們的自定義View類，在這裡做試驗！XfermodeView.java：

/**
 * Created by Jay on 2015/10/23 0023.
 */
public class XfermodeView extends View {

    private PorterDuffXfermode pdXfermode;   //定義PorterDuffXfermode變量
    //定義MODE常量，等下直接改這裡即可進行測試
    private static PorterDuff.Mode PD_MODE = PorterDuff.Mode.ADD;
    private int screenW, screenH; //屏幕寬高
    private int width = 200;      //繪制的圖片寬高
    private int height = 200;
    private Bitmap srcBitmap, dstBitmap;     //上層SRC的Bitmap和下層Dst的Bitmap

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

    public XfermodeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        screenW = ScreenUtil.getScreenW(context);
        screenH = ScreenUtil.getScreenH(context);
        //創建一個PorterDuffXfermode對象
        pdXfermode = new PorterDuffXfermode(PD_MODE);
        //實例化兩個Bitmap
        srcBitmap = makeSrc(width, height);
        dstBitmap = makeDst(width, height);
    }

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


    //定義一個繪制圓形Bitmap的方法
    private Bitmap makeDst(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(0xFF26AAD1);
        c.drawOval(new RectF(0, 0, w * 3 / 4, h * 3 / 4), p);
        return bm;
    }

    //定義一個繪制矩形的Bitmap的方法
    private Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
        p.setColor(0xFFFFCE43);
        c.drawRect(w / 3, h / 3, w * 19 / 20, h * 19 / 20, p);
        return bm;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint();
        paint.setFilterBitmap(false);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawBitmap(srcBitmap, (screenW / 3 - width) / 2, (screenH / 2 - height) / 2, paint);
        canvas.drawBitmap(dstBitmap, (screenW / 3 - width) / 2 + screenW / 3, (screenH / 2 - height) / 2, paint);

        //創建一個圖層，在圖層上演示圖形混合後的效果
        int sc = canvas.saveLayer(0, 0, screenW, screenH, null, Canvas.MATRIX_SAVE_FLAG |
                Canvas.CLIP_SAVE_FLAG |
                Canvas.HAS_ALPHA_LAYER_SAVE_FLAG |
                Canvas.FULL_COLOR_LAYER_SAVE_FLAG |
                Canvas.CLIP_TO_LAYER_SAVE_FLAG);

        canvas.drawBitmap(dstBitmap, (screenW / 3 - width) / 2 + screenW / 3 * 2,
                (screenH / 2 - height) / 2, paint);     //繪制i
        //設置Paint的Xfermode
        paint.setXfermode(pdXfermode);
        canvas.drawBitmap(srcBitmap, (screenW / 3 - width) / 2 + screenW / 3 * 2,
                (screenH / 2 - height) / 2, paint);
        paint.setXfermode(null);
        // 還原畫布
        canvas.restoreToCount(sc);
    }
}

代碼看起來好復雜是吧，其實不然，無非就是獲取了屏幕寬高，然後畫了一個矩形一個圓形，
計算了一下他們的位置，然後設置下圖層(固定寫法)，接著設下下畫筆setXfermode，接著
繪制到canvas上而已，你看不懂的可能是繪制位置的計算吧，其實不然，位置你喜歡怎麼定
都可以！那麼接下來我們來一個個看下解果咯，你只需修改PD_MODE的值設置為不同模式即可！

運行效果圖：