Paint API之－ Xfermode與PorterDuff詳解(二)
本節引言：
上一節，我們學習了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的值設定為不同模式即可！
運行效果圖：
1）PorterDuff.Mode.ADD：
飽和度疊加
2）PorterDuff.Mode.CLEAR：
##所繪製不會提交到畫布上，嗯結果...不知道是為什麼了，正常是沒東西的..
#取兩層全部區域，交集部分顏色加深
只保留目標圖的alpha和color，所以繪製出來只有目標圖
源圖和目標圖相交處繪製目標圖，不相交的地方繪製來源圖
兩者相交的地方繪製目標圖，繪製的效果會受到原圖處的透明度影響
在不相交的地方繪製目標圖
目標圖繪製在上面
取兩圖層全部區域，點亮交集部分顏色
11）PorterDuff.Mode.OVERLAY：
##疊加
12）PorterDuff.Mode.SCREEN：
#取兩圖層全部區域，交集部分變成透明色
13）PorterDuff.Mode.SRC：
只保留來源影像的alpha和color，所以繪製出來只有來源圖
14）PorterDuff.Mode.SRC_ATOP：
源圖和目標圖相交處繪製源圖，不相交的地方繪製目標圖
15）PorterDuff.Mode. SRC_IN：
兩者相交的地方繪製源圖
16）PorterDuff.Mode.SRC_OUT：
不相交的地方繪製來源圖
17）PorterDuff.Mode.SRC_OVER：
把來源圖繪製在上面
18）PorterDuff.Mode.XOR：
不相交的地方以原樣繪製來源圖和目標圖
本節範例程式碼下載：
#本節小結：
嗯，本節就寫了一個簡單的View來驗證這18種不同PorterDuff.Mode下的不同效果， 嘿嘿，蠻耗時間的，不過，讀者看起來肯定清晰多了是吧~當然，這只是一些初步的見解！
PorterDuffXfermode的PorterDuff.Mode對於我們自訂控制項是非常重要的！ 本節我們初步了解，下節我們挑幾個例子來練練手！
如果你想看關於PorterDuff.Mode更詳細的介紹可見：Android Paint之 setXfermode PorterDuffXfermode 講解，別人寫的不錯的一篇文章！ 嗯，就到這裡，明早體檢，今天就寫這麼多~
