PorterDuffXferMode不正確的真正原因PorterDuffXferMode深入試驗)

菜雞wing遇敵PorterDuffXferMode，不料過於輕敵，應戰吃力。隨後與其大戰三天三夜，三百餘回合不分勝負。幸得 @咪咪控相助，僥倖獲勝。

關鍵字：PorterDuffXferMode 錯誤不正確不達到預期 bug

上一篇帶來一個使用PorterDuffXferMode 做的水波紋loadingview，中間遇到了點小困難。

（說人話） PorterDuffXferMode總是不能按照效果圖預期的效果執行。關於PorterDuffXferMode的錯誤顯示是一個對初學者十分深的坑，到底是bug呢，還是有需要注意的地方呢。這裏就跟隨我帶上手電筒，去一探究竟。

轉載請註明出處：http://blog.csdn.NET/wingichoy/article/details/50534175

首先，大家都知道有一個圖片：

然後，大部分時候是看到了覺得很神奇，就躍躍欲試，尤其是src_in 和dstIn可以實現遮罩效果，例如圓角圖片圓形圖片都用了這種模式。

於是就挨個測試各種模式是否生效，結果往往不能達到預期效果。我們來做個測試。

從最簡單的開始：

1.直接在canvas上面繪製圖形：

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst
canvas.drawRect(20,20,80,80,mDstPaint);
//src
canvas.drawCircle(30,30,30,mSrcPaint);
}

原圖效果是這樣的：

現在加一個mode上來，XOR

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst
canvas.drawRect(20,20,80,80,mDstPaint);
mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
//src
canvas.drawCircle(30,30,30,mSrcPaint);
}

跑起來的結果是這樣的：

WTF！！？？這是什麼鬼。不應該是相交部分消失嗎。網上說“硬件加速”對這個有影響，那麼在構造器裏關閉硬件加速試一下：

[java] view plain copy

public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mDstPaint = new Paint();
mSrcPaint = new Paint();
mDstPaint.setColor(Color.YELLOW);
mSrcPaint.setColor(Color.BLUE);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

運行的結果：

這下正常了。相交的部分消失了。

結論1：硬件加速對PorterDuffXferMode有影響，使用前請關閉硬件加速。

那麼這下真的天下太平了嗎？nonono~不要太天真，不然怎麼能叫萬丈深淵呢。

繼續試驗其他模式：將模式改爲SRC_IN

WTF？？？？？跟效果圖根本不一致好嗎！！！！在試試DST_IN

你確定你沒有在逗我？？？？怎麼是這個鬼東西。（當時鼓搗了我三天四夜，一直在日狗，不過先別急，慢慢來。）

爲什麼一定要按照那個效果圖來呢。。。因爲特麼的那個圖是官方的一個demo。。那麼我們就來看看這個demo長什麼樣！

[java] view plain copy

package io.appium.android.apis.graphics;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.Xfermode;
import android.os.Bundle;
import android.view.View;
public class Xfermodes extends GraphicsActivity {
// create a bitmap with a circle, used for the "dst" image
static 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(0xFFFFCC44);
c.drawOval(new RectF(0, 0, w*3/4, h*3/4), p);
return bm;
}
// create a bitmap with a rect, used for the "src" image
static 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(0xFF66AAFF);
c.drawRect(w/3, h/3, w*19/20, h*19/20, p);
return bm;
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
private static class SampleView extends View {
private static final int W = 64;
private static final int H = 64;
private static final int ROW_MAX = 4; // number of samples per row
private Bitmap mSrcB;
private Bitmap mDstB;
private Shader mBG; // background checker-board pattern
private static final Xfermode[] sModes = {
new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
new PorterDuffXfermode(PorterDuff.Mode.SRC),
new PorterDuffXfermode(PorterDuff.Mode.DST),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),
new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),
new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
new PorterDuffXfermode(PorterDuff.Mode.XOR),
new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
new PorterDuffXfermode(PorterDuff.Mode.SCREEN)
};
private static final String[] sLabels = {
"Clear", "Src", "Dst", "SrcOver",
"DstOver", "SrcIn", "DstIn", "SrcOut",
"DstOut", "SrcATop", "DstATop", "Xor",
"Darken", "Lighten", "Multiply", "Screen"
};
public SampleView(Context context) {
super(context);
mSrcB = makeSrc(W, H);
mDstB = makeDst(W, H);
// make a ckeckerboard pattern
Bitmap bm = Bitmap.createBitmap(new int[] { 0xFFFFFFFF, 0xFFCCCCCC,
0xFFCCCCCC, 0xFFFFFFFF }, 2, 2,
Bitmap.Config.RGB_565);
mBG = new BitmapShader(bm,
Shader.TileMode.REPEAT,
Shader.TileMode.REPEAT);
Matrix m = new Matrix();
m.setScale(6, 6);
mBG.setLocalMatrix(m);
}
@Override protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
Paint labelP = new Paint(Paint.ANTI_ALIAS_FLAG);
labelP.setTextAlign(Paint.Align.CENTER);
Paint paint = new Paint();
paint.setFilterBitmap(false);
canvas.translate(15, 35);
int x = 0;
int y = 0;
for (int i = 0; i < sModes.length; i++) {
// draw the border
paint.setStyle(Paint.Style.STROKE);
paint.setShader(null);
canvas.drawRect(x - 0.5f, y - 0.5f,
x + W + 0.5f, y + H + 0.5f, paint);
// draw the checker-board pattern
paint.setStyle(Paint.Style.FILL);
paint.setShader(mBG);
canvas.drawRect(x, y, x + W, y + H, paint);
// draw the src/dst example into our offscreen bitmap
int sc = canvas.saveLayer(x, y, x + W, y + H, 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.translate(x, y);
canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(mSrcB, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(sc);
// draw the label
canvas.drawText(sLabels[i],
x + W/2, y - labelP.getTextSize()/2, labelP);
x += W + 10;
// wrap around when we've drawn enough for one row
if ((i % ROW_MAX) == ROW_MAX - 1) {
x = 0;
y += H + 30;
}
}
}
}
}

一點一點看，截取onDraw裏面的片段，這裏

[java] view plain copy

canvas.drawBitmap(mDstB, 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(mSrcB, 0, 0, paint);
paint.setXfermode(null);

他是畫了兩個bitmap。網上有人說好像只對bitmap生效，那到底是不是這樣呢。我們來試驗一下。

我們新定義一個canvas 再定義一個bitmap 現在bitmap上畫出來src 然後將bitmap畫到canvas上：

[java] view plain copy

public TestView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mDstPaint = new Paint();
mSrcPaint = new Paint();
mDstPaint.setColor(Color.YELLOW);
mSrcPaint.setColor(Color.BLUE);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
mSrcBitmap = Bitmap.createBitmap(50,50, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mSrcBitmap);
}

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst
canvas.drawRect(20,20,80,80,mDstPaint);
//src
/ mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
mCanvas.drawCircle(25,25,25,mSrcPaint);
canvas.drawBitmap(mSrcBitmap,0,0,null);
}

現在的效果是這樣的：

加一個XOR 試試。。

日了狗了！！！！！沒反應啊，到底是什麼鬼。

是不是兩個都需要bitmap纔可以呢，再創建一個dstBitmap和dstCanvas？

[java] view plain copy

mDstBitmap = Bitmap.createBitmap(50,50, Bitmap.Config.ARGB_8888);
mDstCanvas = new Canvas(mDstBitmap);

加一個XOR 試試

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst
mDstCanvas.drawRect(20,20,80,80,mDstPaint);
canvas.drawBitmap(mDstBitmap,0,0,mDstPaint);
//src
mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
mSrcCanvas.drawCircle(25,25,25,mSrcPaint);
canvas.drawBitmap(mSrcBitmap,0,0,mSrcPaint);
}

效果如下：

終於他媽的出來了！！！！那其他效果呢？

clear

一致的！！！！好激動有沒有！！！！搞了4天越來越接近結論了！！！

結論2：只有兩個bitmap的時候，纔可以生效。

不要高興太早。。如果坑到這裏就完了，那還叫坑麼。

繼續試。。嗯好多模式都是一致的。

直到！！！SRC_IN和DST_IN ，會發現。。。都消失了。爲毛呢？？

檢查代碼發現在往bitmap畫圓之前就set了mode 這樣會有影響

糾正

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst
mDstCanvas.drawRect(20,20,80,80,mDstPaint);
canvas.drawBitmap(mDstBitmap,0,0,mDstPaint);
//src
mSrcCanvas.drawCircle(25,25,25,mSrcPaint);
//再畫圓之後設置mode
mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.XOR));
canvas.drawBitmap(mSrcBitmap,0,0,mSrcPaint);
}

發現

艹！！！！！！終於好了！！！！！！！！經過不懈努力！！！撒花！*★,°*:.☆\(￣▽￣)/$:*.°★* 。

其實我們剛纔bitmap的大小是一樣的。然後都是從0,0開始完全覆蓋了。

那麼錯開一點點是什麼效果呢，調整代碼如下

[java] view plain copy

protected void onDraw(Canvas canvas) {
//dst
mDstCanvas.drawRect(20,20,80,80,mDstPaint);
canvas.drawBitmap(mDstBitmap,20,20,mDstPaint);
//src
mSrcCanvas.drawCircle(25,25,25,mSrcPaint);
mSrcPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(mSrcBitmap,0,0,mSrcPaint);
}

效果如下：

可以看有效果了！！！！但是是一個什麼鬼！！！矩形缺角？？加藍色一點？？

這樣看是很難看出效果的。。來調整一下bitmap的底色和矩形的大小：

把兩個bitmap的底色都畫成灰色，矩形不要佔滿畫布留出空間

[java] view plain copy

mDstCanvas.drawColor(Color.GRAY);

[java] view plain copy

@Override
protected void onDraw(Canvas canvas) {
//dst 黃色
mDstCanvas.drawRect(0,0,40,40,mDstPaint);
canvas.drawBitmap(mDstBitmap,20,20,mDstPaint);
//src 藍色
mSrcCanvas.drawCircle(25,25,25,mSrcPaint);
canvas.drawBitmap(mSrcBitmap,0,0,mSrcPaint);
}

效果如下。。嗯這樣就是兩個bitmap了。。很明瞭 bitmap的內容位置，

然後再搞SRC_IN模式

dst_in

那麼把bitmap底色去掉。改成透明的呢？

dst_in：

SRC_IN：

總結3：兩個bitmap位置不完全重疊的效果如上,並不能總結出效果，要按實際效果來。

---------------------------------------------------------------------------------------------------------華麗麗的分割線-----------------------------------------------------------------------------------------

最終大總結，如果想讓PorterDuffXferMode按照預期Demo（或者效果圖）的效果圖像實現，必須滿足以下條件：

1、關閉硬件加速。

2、兩個bitmap大小盡量一樣。

3、背景色爲透明色。

4、如果兩個bitmap位置不完全一樣，可能也是預期效果，只不過你看到的效果和你自己腦補的預期效果不一致。

最後想再說幾句。鼓搗這個模式鼓搗了幾乎一週，每天晚上下班都在搞。查了無數資料。但是好多不完整，甚至有一些誤導性。所以爲了避免後來者入坑。親自試驗，儘量總結。如果有說的不正確的地方請及時向我提出。我會及時改正。

如果本文幫助到了你，請點一個頂，或者評論一下，蟹蟹！！！！

PorterDuffXferMode不正確的真正原因PorterDuffXferMode深入試驗)

Launcher小部件使用自定義View (僅限Launcher內部的小部件)

find命令查找包含指定內容的文件

製作Ubuntu系統做成LiveCD iso

jquery easyui 彈出對話框被activex控件遮擋問題

Microsoft Office 2013 Professional Plus官方MSDN正式版下載合集 64 32位原版鏡像iso

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結