xfermode的基本用法
1、Xfermode是什么
在Android自定義控件或者對(duì)圖片等進(jìn)行處理時(shí)需要做一些圖像混合的操作時(shí)，會(huì)用到xfermode。利用xfermode可以做出許多有趣的UI效果時(shí)。比如做不同形狀的頭像，刮刮卡。 在做這些效果之前需要先了解xfermode的使用。
2、Xfermode的基本用法
2.1、Xfermode的API
xfermode有三個(gè)子類(lèi)：AvoidXfermode, PixelXorXfermode和PorterDuffXfermode。其中AvoidXfermode, PixelXorXfermode已經(jīng)過(guò)時(shí)不推薦使用。那么PorterDuffXfermode則是需要了解的東西。
2.2、Xfermode的基本概念
一下的一張圖和一段偽代碼可以理解PorterDuffXfermode的基本概念。
Xfermode理解起來(lái)并不是很難，根據(jù)上面的圖可以理解為，兩個(gè)不同的像素點(diǎn)。通過(guò)Xfermode的不同的混合模式混合之后展示出來(lái)的新的像素點(diǎn)效果。（注意這里是針對(duì)每一個(gè)像素的混合效果。而且這兩個(gè)像素點(diǎn)需要是在畫(huà)布上的同一位置，可以理解為重疊）
偽代碼可以這樣表示：
// 初始化PorterDuffXfermode private PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);// 在ondraw中使用PorterDuffXfermodeprotected void onDraw(Canvas canvas) {// DstBitmap SRCBitmap 為兩個(gè)不同的bitmapcanvas.drawBitmap(DstBitmap,0,0,mPaint);// PorterDuffXfermode和paint聯(lián)用mPaint.setXfermode(xfermode);canvas.drawBitmap(SRCBitmap,0,0,mPaint);// 將xfermode制空mPaint.setXfermode(null);} 復(fù)制代碼以上的代碼也比較簡(jiǎn)單理解： 先draw一個(gè)bitmap,然后設(shè)置paint的xfermode，然后在畫(huà)第二個(gè)bitmap。這樣他們重疊的部分就會(huì)出現(xiàn)不通過(guò)的UI效果了。
2.3、Xfermode的多種混合模式
PorterDuffXfermode的構(gòu)造函數(shù)：
public PorterDuffXfermode(PorterDuff.Mode mode) {} 復(fù)制代碼參數(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); }復(fù)制代碼注釋中表明了這些模式的算法。
在了解這些算法之前需要先了解像素顏色通道。
一個(gè)像素的顏色是由四個(gè)分量組成即：ARGB
A為透明度通道。RGB為顏色通道。
如果某個(gè)像素點(diǎn)的通道值越大則改像素點(diǎn)所占顏色比例越多。比如A（透明通道）A值越小就越透明。A為0就完全透明，A為1f就是完全不透明。當(dāng)然這個(gè)概念在xfermode中只要了解就行了。xfermode不會(huì)去改變這些值。
那么注釋中的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)圖的顏色. 復(fù)制代碼表示一個(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é)果也不同。
官方的貼圖非常形象的展示出各種混合模式使用后展示的效果。
接下來(lái)挑出一個(gè)常用的例子SRC_IN來(lái)解釋下這些算法的基本應(yīng)用。
圓形頭像實(shí)現(xiàn)的方式可能有很多。比如用bitmapshader等等。使用xfermode同樣能實(shí)現(xiàn)。
看下SRC_IN注釋的算法方式。
SRC_IN (5), /** [Sa * Da, Sa * Dc] */ 復(fù)制代碼SRC_IN的算法是這樣的：
（a）、Sa * Da：源圖（S）像素透明度和目標(biāo)圖片（D）像素的透明的決定混合后像素的透明度
（b）、Sa * Dc：源圖（S）像素透明度和目標(biāo)圖片（D）像素的顏色決定混合后像素的顏色
那么混合的圖解：
從（a）（b）可以看出，源圖片只采用了透明度的變化。混合后圖像像素的透明度和顏色都和源圖的像素的透明度的有關(guān)。如果源圖的像素是透明的，那么混合后的像素為透明。反之不透明。所以源圖為：
從（b）可以看出，決定混合后圖像素顏色是由目標(biāo)圖片（D）決定的。所以目標(biāo)圖片是：
這里主要是理解算法：[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();// 這個(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);}@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);} }復(fù)制代碼上述例子已經(jīng)非常清晰的說(shuō)明了xfermode的算法：
源圖（S）和目標(biāo)圖（D）像素的透明度和顏色，通過(guò)特定的算法來(lái)算出混合后新圖的透明度和顏色。（注意這里是對(duì)每個(gè)像素進(jìn)行操作）
這里只是舉了一個(gè)例子，如果需要了解更多的xfermode的效果可以看下這個(gè)博客： www.jianshu.com/p/d11892bbe…
2.5、關(guān)閉硬件加速
有時(shí)候會(huì)發(fā)現(xiàn)，顯示出來(lái)的東西就是一個(gè)純色，沒(méi)有圖片。可能是沒(méi)有關(guān)閉硬件加速。 這個(gè)API因?yàn)椴恢С钟布铀僭贏PI 16已經(jīng)過(guò)時(shí)了（大家可以在HardwareAccel查看那些方法不支持硬件加速）如果想在高于API 16的機(jī)子上進(jìn)行測(cè)試，必須現(xiàn)在應(yīng)用或手機(jī)設(shè)置中關(guān)閉硬件加速。
這里我就不多做介紹了，看下這篇博客吧：www.cnblogs.com/libertycode…
3、一些常用PorterDuffXfermode的例子
3.1、各種形狀的圖形
使用xfermode來(lái)完成圓形頭像只是其中之一。如果有特殊要求，想弄成其他的形狀都是可以的。 如果我上面寫(xiě)的圓形圖片的例子能夠理解，那么其他的各種形狀的例子使用的方法是一樣的。
3.2、刮刮卡效果
實(shí)際上實(shí)現(xiàn)一個(gè)效果并不是說(shuō)只能采用一種疊加模式。用不同的模式也能做到相同的效果。 這里展示的刮刮卡效果，采用DST_OUT模式。 還有一個(gè)撕掉美女的衣服和刮刮卡類(lèi)似，但是用的是SRC_OUT模式。
這里的源圖和目標(biāo)圖有點(diǎn)不同，源圖或者目標(biāo)圖是手指滑動(dòng)的路徑。畢竟劃過(guò)的路徑變成透明了。
這里撕掉美女衣服太過(guò)底圖太“火爆”，動(dòng)圖就不截取了。
3.3、xfermode不僅僅以上的效果。其他的就不一一介紹。
4、學(xué)習(xí)xfermode遇到的問(wèn)題把。
1、 使用xfermode可能會(huì)糾結(jié)源圖和目標(biāo)圖的問(wèn)題。
這個(gè)確實(shí)是這樣的。具體哪個(gè)做源圖和目標(biāo)圖要根據(jù)具體實(shí)現(xiàn)的效果和不同混合模式的算法去確定。 復(fù)制代碼2、使用xfermode是針對(duì)圖片的像素的。
前面提到多次，操作的是像素。 復(fù)制代碼3、要調(diào)試多次才能達(dá)到效果。
這個(gè)問(wèn)題我遇到多次，覺(jué)得xfermode有毒。 復(fù)制代碼4、這篇文章只是基礎(chǔ)。
更多的效果還需要慢慢研究。 復(fù)制代碼源碼地址：https://github.com/AxeChen/XfermodeSimple
轉(zhuǎn)載于:https://juejin.im/post/5a5aca3a6fb9a01cbf384ea7
總結(jié)
以上是生活随笔為你收集整理的xfermode的基本用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： webService的简单使用
- 下一篇： [基础常识]申请免费SSL证书 - 阿里