1、Xfermode是什么

在Android自定義控件或者對圖片等進行處理時需要做一些圖像混合的操作時，會用到xfermode。利用xfermode可以做出許多有趣的UI效果時。比如做不同形狀的頭像，刮刮卡。 在做這些效果之前需要先了解xfermode的使用。

2、Xfermode的基本用法

2.1、Xfermode的API

xfermode有三個子類：AvoidXfermode, PixelXorXfermode和PorterDuffXfermode。其中AvoidXfermode, PixelXorXfermode已經過時不推薦使用。那么PorterDuffXfermode則是需要了解的東西。

2.2、Xfermode的基本概念

一下的一張圖和一段偽代碼可以理解PorterDuffXfermode的基本概念。

Xfermode理解起來并不是很難，根據上面的圖可以理解為，兩個不同的像素點。通過Xfermode的不同的混合模式混合之后展示出來的新的像素點效果。（注意這里是針對每一個像素的混合效果。而且這兩個像素點需要是在畫布上的同一位置，可以理解為重疊）

偽代碼可以這樣表示：

// 初始化PorterDuffXfermode private PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);// 在ondraw中使用PorterDuffXfermodeprotected void onDraw(Canvas canvas) {// DstBitmap SRCBitmap 為兩個不同的bitmapcanvas.drawBitmap(DstBitmap,0,0,mPaint);// PorterDuffXfermode和paint聯用mPaint.setXfermode(xfermode);canvas.drawBitmap(SRCBitmap,0,0,mPaint);// 將xfermode制空mPaint.setXfermode(null);} 復制代碼

以上的代碼也比較簡單理解： 先draw一個bitmap,然后設置paint的xfermode，然后在畫第二個bitmap。這樣他們重疊的部分就會出現不通過的UI效果了。

2.3、Xfermode的多種混合模式

PorterDuffXfermode的構造函數：

public PorterDuffXfermode(PorterDuff.Mode mode) {} 復制代碼

參數傳入了PorterDuff.Mode mode，以下列出PorterDuff的所以的Mode。

public enum Mode {/** [0, 0] */CLEAR (0),/** [Sa, Sc] */SRC (1),/** [Da, Dc] */DST (2),/** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */SRC_OVER (3),/** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */DST_OVER (4),/** [Sa * Da, Sc * Da] */SRC_IN (5),/** [Sa * Da, Sa * Dc] */DST_IN (6),/** [Sa * (1 - Da), Sc * (1 - Da)] */SRC_OUT (7),/** [Da * (1 - Sa), Dc * (1 - Sa)] */DST_OUT (8),/** [Da, Sc * Da + (1 - Sa) * Dc] */SRC_ATOP (9),/** [Sa, Sa * Dc + Sc * (1 - Da)] */DST_ATOP (10),/** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */XOR (11),/** [Sa + Da - Sa*Da, Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */DARKEN (12),/** [Sa + Da - Sa*Da, Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */LIGHTEN (13),/** [Sa * Da, Sc * Dc] */MULTIPLY (14),/** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */SCREEN (15),/** Saturate(S + D) */ADD (16),OVERLAY (17); }復制代碼

注釋中表明了這些模式的算法。
在了解這些算法之前需要先了解像素顏色通道。

一個像素的顏色是由四個分量組成即：ARGB
A為透明度通道。RGB為顏色通道。

A : 像素點的透明度通道 值為0-1f R : 像素點紅色通道 值為0-250f G ：像素點綠色通道 值為0-250f B ：像素點藍色通道 值為0-250f 復制代碼

如果某個像素點的通道值越大則改像素點所占顏色比例越多。比如A（透明通道）A值越小就越透明。A為0就完全透明，A為1f就是完全不透明。當然這個概念在xfermode中只要了解就行了。xfermode不會去改變這些值。

那么注釋中的sa、sc、da、 dc可以如下理解

S為源圖 D為目標圖 Sa：全稱為Source alpha，表示源圖的Alpha通道； Sc：全稱為Source color，表示源圖的顏色； Da：全稱為Destination alpha，表示目標圖的Alpha通道； Dc：全稱為Destination color，表示目標圖的顏色. 復制代碼

表示一個源圖片的像素點： [Sa , Sc]
表示一個目標圖片的像素點： [Da , Dc]
然后根據不同的模式的算法就可以生成混合后的像素點了。當然混合后的像素點也是用[A , B]這種格式表示。

2.4、xfermode模式算法的示例

不同的模式有不同的算法。算不同最后的結果也不同。

官方的貼圖非常形象的展示出各種混合模式使用后展示的效果。

接下來挑出一個常用的例子SRC_IN來解釋下這些算法的基本應用。
圓形頭像實現的方式可能有很多。比如用bitmapshader等等。使用xfermode同樣能實現。

看下SRC_IN注釋的算法方式。

SRC_IN (5), /** [Sa * Da, Sa * Dc] */ 復制代碼

SRC_IN的算法是這樣的：

（a）、Sa * Da：源圖（S）像素透明度和目標圖片（D）像素的透明的決定混合后像素的透明度
（b）、Sa * Dc：源圖（S）像素透明度和目標圖片（D）像素的顏色決定混合后像素的顏色

那么混合的圖解：

從（a）（b）可以看出，源圖片只采用了透明度的變化。混合后圖像像素的透明度和顏色都和源圖的像素的透明度的有關。如果源圖的像素是透明的，那么混合后的像素為透明。反之不透明。所以源圖為：

從（b）可以看出，決定混合后圖像素顏色是由目標圖片（D）決定的。所以目標圖片是：

這里主要是理解算法：[Sa * Da, Sa * Dc]
最后效果：

示例代碼：

public class CustomHeadView extends View {private Bitmap DBitmap;private Bitmap SBitmap;private Paint mPaint;private PorterDuffXfermode xfermode;public CustomHeadView(Context context) {this(context, null);}public CustomHeadView(Context context, @Nullable AttributeSet attrs) {this(context, attrs, 0);}public CustomHeadView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init(){mPaint = new Paint();// 這個圖片是正常的頭像DBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.head_d,null);// 這個圖片是中間一個圓，四個角透明的圖片SBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.head_s,null);xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);canvas.drawBitmap(SBitmap,0,0,mPaint);mPaint.setXfermode(xfermode);canvas.drawBitmap(DBitmap,0,0,mPaint);mPaint.setXfermode(null);canvas.restoreToCount(layerId);} }復制代碼

上述例子已經非常清晰的說明了xfermode的算法：

源圖（S）和目標圖（D）像素的透明度和顏色，通過特定的算法來算出混合后新圖的透明度和顏色。（注意這里是對每個像素進行操作）

這里只是舉了一個例子，如果需要了解更多的xfermode的效果可以看下這個博客： www.jianshu.com/p/d11892bbe…

2.5、關閉硬件加速

有時候會發現，顯示出來的東西就是一個純色，沒有圖片。可能是沒有關閉硬件加速。 這個API因為不支持硬件加速在API 16已經過時了（大家可以在HardwareAccel查看那些方法不支持硬件加速）如果想在高于API 16的機子上進行測試，必須現在應用或手機設置中關閉硬件加速。

這里我就不多做介紹了，看下這篇博客吧：www.cnblogs.com/libertycode…

3、一些常用PorterDuffXfermode的例子

3.1、各種形狀的圖形

使用xfermode來完成圓形頭像只是其中之一。如果有特殊要求，想弄成其他的形狀都是可以的。 如果我上面寫的圓形圖片的例子能夠理解，那么其他的各種形狀的例子使用的方法是一樣的。

3.2、刮刮卡效果

實際上實現一個效果并不是說只能采用一種疊加模式。用不同的模式也能做到相同的效果。 這里展示的刮刮卡效果，采用DST_OUT模式。 還有一個撕掉美女的衣服和刮刮卡類似，但是用的是SRC_OUT模式。

這里的源圖和目標圖有點不同，源圖或者目標圖是手指滑動的路徑。畢竟劃過的路徑變成透明了。

這里撕掉美女衣服太過底圖太“火爆”，動圖就不截取了。

3.3、xfermode不僅僅以上的效果。其他的就不一一介紹。

4、學習xfermode遇到的問題把。

1、 使用xfermode可能會糾結源圖和目標圖的問題。

這個確實是這樣的。具體哪個做源圖和目標圖要根據具體實現的效果和不同混合模式的算法去確定。 復制代碼

2、使用xfermode是針對圖片的像素的。

前面提到多次，操作的是像素。 復制代碼

3、要調試多次才能達到效果。

這個問題我遇到多次，覺得xfermode有毒。 復制代碼

4、這篇文章只是基礎。

更多的效果還需要慢慢研究。 復制代碼

源碼地址：https://github.com/AxeChen/XfermodeSimple

轉載于:https://juejin.im/post/5a5aca3a6fb9a01cbf384ea7

總結

以上是生活随笔為你收集整理的xfermode的基本用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。