xfermode的基本用法

1魏烫、Xfermode是什么

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

2、Xfermode的基本用法

2.1焚虱、Xfermode的API

xfermode有三個(gè)子類：AvoidXfermode, PixelXorXfermode和PorterDuffXfermode购裙。其中AvoidXfermode, PixelXorXfermode已經(jīng)過時(shí)不推薦使用。那么PorterDuffXfermode則是需要了解的東西鹃栽。

2.2躏率、Xfermode的基本概念

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

[圖片上傳失敗...(image-912ba6-1515977399270)]

Xfermode理解起來并不是很難谍咆，根據(jù)上面的圖可以理解為禾锤，兩個(gè)不同的像素點(diǎn)私股。通過Xfermode的不同的混合模式混合之后展示出來的新的像素點(diǎn)效果摹察。（注意這里是針對每一個(gè)像素的混合效果。而且這兩個(gè)像素點(diǎn)需要是在畫布上的同一位置倡鲸，可以理解為重疊）

偽代碼可以這樣表示：

// 初始化PorterDuffXfermode
private PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);

// 在ondraw中使用PorterDuffXfermode
 protected void onDraw(Canvas canvas) {

        // DstBitmap SRCBitmap 為兩個(gè)不同的bitmap
        canvas.drawBitmap(DstBitmap,0,0,mPaint);
        // PorterDuffXfermode和paint聯(lián)用
        mPaint.setXfermode(xfermode);
        canvas.drawBitmap(SRCBitmap,0,0,mPaint);
        
        // 將xfermode制空
        mPaint.setXfermode(null);
    }

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

2.3克滴、Xfermode的多種混合模式

PorterDuffXfermode的構(gòu)造函數(shù)：

public PorterDuffXfermode(PorterDuff.Mode mode) {}

參數(shù)傳入了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);
}

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

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

A : 像素點(diǎn)的透明度通道 值為0-1f
R : 像素點(diǎn)紅色通道 值為0-250f
G ：像素點(diǎn)綠色通道 值為0-250f
B ：像素點(diǎn)藍(lán)色通道 值為0-250f

如果某個(gè)像素點(diǎn)的通道值越大則改像素點(diǎn)所占顏色比例越多杂伟。比如A（透明通道）A值越小就越透明。A為0就完全透明仍翰，A為1f就是完全不透明赫粥。當(dāng)然這個(gè)概念在xfermode中只要了解就行了。xfermode不會去改變這些值予借。

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

S為源圖 D為目標(biāo)圖
Sa：全稱為Source alpha秦叛，表示源圖的Alpha通道；
Sc：全稱為Source color龟再，表示源圖的顏色书闸；
Da：全稱為Destination alpha，表示目標(biāo)圖的Alpha通道利凑；
Dc：全稱為Destination color浆劲，表示目標(biāo)圖的顏色.

表示一個(gè)源圖片的像素點(diǎn)： [Sa , Sc]
表示一個(gè)目標(biāo)圖片的像素點(diǎn)： [Da , Dc]
然后根據(jù)不同的模式的算法就可以生成混合后的像素點(diǎn)了。當(dāng)然混合后的像素點(diǎn)也是用[A , B]這種格式表示哀澈。

2.4牌借、xfermode模式算法的示例

不同的模式有不同的算法。算不同最后的結(jié)果也不同割按。

image

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

接下來挑出一個(gè)常用的例子SRC_IN來解釋下這些算法的基本應(yīng)用。
圓形頭像實(shí)現(xiàn)的方式可能有很多适荣。比如用bitmapshader等等现柠。使用xfermode同樣能實(shí)現(xiàn)。

看下SRC_IN注釋的算法方式弛矛。

SRC_IN      (5),
/** [Sa * Da, Sa * Dc] */

SRC_IN的算法是這樣的：

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

那么混合的圖解：

SRC_IN圖解

從（a）（b）可以看出丈氓，源圖片只采用了透明度的變化周循∏糠ǎ混合后圖像像素的透明度和顏色都和源圖的像素的透明度的有關(guān)。如果源圖的像素是透明的湾笛，那么混合后的像素為透明饮怯。反之不透明。所以源圖為：

源圖片（S）

從（b）可以看出嚎研，決定混合后圖像素顏色是由目標(biāo)圖片（D）決定的蓖墅。所以目標(biāo)圖片是：

目標(biāo)圖片（D）

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

TIM截圖20180122152840.png

示例代碼：

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();
        // 這個(gè)圖片是正常的頭像
        DBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.head_d,null);
        // 這個(gè)圖片是中間一個(gè)圓，四個(gè)角透明的圖片
        SBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.head_s,null);
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
    }

    @Override
    protected 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);
    }
}

上述例子已經(jīng)非常清晰的說明了xfermode的算法：

源圖（S）和目標(biāo)圖（D）像素的透明度和顏色临扮，通過特定的算法來算出混合后新圖的透明度和顏色置媳。（注意這里是對每個(gè)像素進(jìn)行操作）

這里只是舉了一個(gè)例子，如果需要了解更多的xfermode的效果可以看下這個(gè)博客：
http://www.reibang.com/p/d11892bbe055

2.5公条、關(guān)閉硬件加速

有時(shí)候會發(fā)現(xiàn)拇囊，顯示出來的東西就是一個(gè)純色，沒有圖片靶橱×认可能是沒有關(guān)閉硬件加速。
這個(gè)API因?yàn)椴恢С钟布铀僭贏PI 16已經(jīng)過時(shí)了（大家可以在HardwareAccel查看那些方法不支持硬件加速）如果想在高于API 16的機(jī)子上進(jìn)行測試关霸，必須現(xiàn)在應(yīng)用或手機(jī)設(shè)置中關(guān)閉硬件加速传黄。
這里我就不多做介紹了，看下這篇博客吧： https://www.cnblogs.com/libertycode/p/6290497.html

3队寇、一些常用PorterDuffXfermode的例子

3.1膘掰、各種形狀的圖形

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

各種形狀的圖形

3.2窒舟、刮刮卡效果

實(shí)際上實(shí)現(xiàn)一個(gè)效果并不是說只能采用一種疊加模式。用不同的模式也能做到相同的效果诵盼。
這里展示的刮刮卡效果惠豺，采用DST_OUT模式。
還有一個(gè)撕掉美女的衣服和刮刮卡類似风宁，但是用的是SRC_OUT模式洁墙。

這里的源圖和目標(biāo)圖有點(diǎn)不同，源圖或者目標(biāo)圖是手指滑動的路徑戒财。畢竟劃過的路徑變成透明了热监。

刮刮卡效果

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

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

4疗琉、這個(gè)不知道起個(gè)什么標(biāo)題好，就記錄下我學(xué)習(xí)xfermode遇到的問題把歉铝。

1盈简、使用xfermode可能會糾結(jié)源圖和目標(biāo)圖的問題。

 這個(gè)確實(shí)是這樣的太示。具體哪個(gè)做源圖和目標(biāo)圖要根據(jù)具體
 實(shí)現(xiàn)的效果和不同混合模式的算法去確定柠贤。

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

 前面提到多次臼勉，操作的是像素。

3餐弱、要調(diào)試多次才能達(dá)到效果宴霸。

這個(gè)問題我遇到多次，覺得xfermode有毒膏蚓。

4瓢谢、這篇文章只是基礎(chǔ)，而且寫的還有點(diǎn)爛驮瞧。

 好的文章應(yīng)該是下一篇氓扛！

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

原文來自掘金：https://juejin.im/post/5a5aca3a6fb9a01cbf384ea7
作者：塵封的落葉（就是我自己。）