【转】Android Paint之 setXfermode PorterDuffXfermode 讲解

 

[置顶] Android Paint之 setXfermode PorterDuffXfermode 讲解

分类: android动效篇

 

尊重原创,欢迎转载,转载请注明: FROM  GA_studio   http://blog.csdn.net/tianjian4592

 

前面关于paint的方法讲解里,讲到 setXfermode 就截止了,原因有两个:

1. 那篇文章已经太长了,我自己都看不下去了;

2. setXfermode 在paint 里占有至关重要的地位;

基于以上两个原因,我们一起来看看这个方法有何妙用。

首先我们还是来看看关于这个方法的说明:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /**  
  2.  * Set or clear the xfermode object. - 设置或清除xfermode对象;  
  3.  * Pass null to clear any previous xfermode. - 传递null以清除任何以前的xfermode。  
  4.  * As a convenience, the parameter passed is also returned. - 为方便起见,也返回传递的参数。  
  5.  *  
  6.  * @return         xfermode  
  7.  */  
  8. public Xfermode setXfermode(Xfermode xfermode) {  
  9.     int xfermodeNative = 0;  
  10.     if (xfermode != null)  
  11.         xfermodeNative = xfermode.native_instance;  
  12.     native_setXfermode(mNativePaint, xfermodeNative);  
  13.     mXfermode = xfermode;  
  14.     return xfermode;  
  15. }  

 

这个方法传进一个 Xfermode 对象,而打开 Xfermode 发现里面没有提供任何可用的构造函数或方法,ctrl +T 看到它有三个子类:

 

 

前两个子类 AvoidXfermode 和 PixelXorXfermode 大家可以看到都已经被划上了斜线,下面就简单提及一下,咱们的重点在 PorterDuffXfermode :

1. AvoidXfermode:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /** This xfermode draws, or doesn't draw, based on the destination's  
  2.  * distance from an op-color.  
  3.  *  
  4.  * There are two modes, and each mode interprets a tolerance value.  
  5.  *  
  6.  * Avoid: In this mode, drawing is allowed only on destination pixels that  
  7.  * are different from the op-color.  
  8.  * Tolerance near 0: avoid any colors even remotely similar to the op-color  
  9.  * Tolerance near 255: avoid only colors nearly identical to the op-color  
  10.  * Tolerance near 0: draw only on colors that are nearly identical to the op-color  
  11.  * Tolerance near 255: draw on any colors even remotely similar to the op-color  
  12.  */  
  13. public AvoidXfermode(int opColor, int tolerance, Mode mode) {  
  14.     if (tolerance 0 || tolerance > 255) {  
  15.         throw new IllegalArgumentException("tolerance must be 0..255");  
  16.     }  
  17.     native_instance = nativeCreate(opColor, tolerance, mode.nativeInt);  
  18. }  

咱们把它上面的说明看下就很清楚了:

 

xfermode 是否绘制,基于目标色和参数 op-color 的差距;

其中有两种模式,分别为 Avoid 和 TARGET:

Avoid模式:只会在目标像素值和 op-color "不一样" 的地方进行绘制;

Target模式:只会在目标像素值和 op-color "一样" 的地方进行绘制;

上面的"一样" 和 "不一样" 我都打上了引号,并不是指严格意义上的一样,而是只要在可容忍范围内就代表一样,这个可容忍范围,就是容差值(tolerance),0 代表最小容差,即得和 op-color 真正意义上一样才 ok ,255 则代表最大容差,只要有一点相近,则ok;

咱们一起来看个小例子:

先在网上找个图案,用PS去掉周围部分,主体改为纯色;

 

                                  

 

当我们使用PS里的魔棒创立选区的时候,发现一次只选取了其中最相近的一部分,这时候可以看到容差为5,但我们的目的是想把图形周围近似的蓝灰色都选中该怎么办呢?容差这时候就起作用了,改大容差,就相当于调大近似度,这个概念和我们里面的容差值是一样的,希望这样说便于理解,我们看下对比图,调到50 一下就可以选中外层所有蓝灰色:

 

                                               

 

好,我们现在有了一个纯色的图标,假定我们现在有一个需求,需要在某种操作下将图标变色,类似微信底部的tab图标,未选中时时白色,选中时是绿色,这个时候我们就可以用

AvoidXfermode 进行实现,我们一起看看要怎么做:

1. 给paint 设置要变换的颜色和图层混合模式为 AvoidXfermode;

2. 绘制图标;

3. 再绘制对应色块;

由于是对对应颜色进行替换,所以也就形成了图标变色的效果,一起来看看代码:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public class AvoidXfermodeView extends View {  
  2.   
  3.     private Paint mBitmapPaint, mAvoidPaint;  
  4.   
  5.     private int mTotalWidth, mTotalHeight;  
  6.   
  7.     private Bitmap mBitmap;  
  8.     private int mBitWidth, mBitHeight;  
  9.     private Rect mOriginSrcRect, mOriginDestRect;  
  10.     private Rect mAvoidSrcRect, mAvoidDestRect;  
  11.   
  12.     private AvoidXfermode mAvoidXfermode;  
  13.   
  14.     public AvoidXfermodeView(Context context) {  
  15.         super(context);  
  16.         initPaint();  
  17.         initBitmap();  
  18.         // 对蓝色相近的颜色进行替换  
  19.         mAvoidXfermode = new AvoidXfermode(Color.BLUE, 150, Mode.TARGET);  
  20.     }  
  21.   
  22.     private void initBitmap() {  
  23.         mBitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.bluelogo)).getBitmap();  
  24.         mBitWidth = mBitmap.getWidth();  
  25.         mBitHeight = mBitmap.getHeight();  
  26.     }  
  27.   
  28.     private void initPaint() {  
  29.         mBitmapPaint = new Paint();  
  30.         // 去锯齿  
  31.         mBitmapPaint.setAntiAlias(true);  
  32.         // 防抖动  
  33.         mBitmapPaint.setDither(true);  
  34.         // 图像过滤  
  35.         mBitmapPaint.setFilterBitmap(true);  
  36.   
  37.         // 使用上面属性创建一个新paint  
  38.         mAvoidPaint = new Paint(mBitmapPaint);  
  39.         // 颜色设置为红色  
  40.         mAvoidPaint.setColor(Color.RED);  
  41.     }  
  42.   
  43.     @Override  
  44.     protected void onDraw(Canvas canvas) {  
  45.         super.onDraw(canvas);  
  46.         // 绘制原图  
  47.         canvas.drawBitmap(mBitmap, mOriginSrcRect, mOriginDestRect, mBitmapPaint);  
  48.   
  49.         // 绘制用于变色图  
  50.         canvas.drawBitmap(mBitmap, mAvoidSrcRect, mAvoidDestRect, mAvoidPaint);  
  51.         // 设置图层混合模式  
  52.         mAvoidPaint.setXfermode(mAvoidXfermode);  
  53.         // 绘制色块进行混合,得到最终效果  
  54.         canvas.drawRect(mAvoidDestRect, mAvoidPaint);  
  55.     }  
  56.   
  57.     @Override  
  58.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  59.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  60.     }  
  61.   
  62.     @Override  
  63.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  64.         super.onSizeChanged(w, h, oldw, oldh);  
  65.         mTotalWidth = w;  
  66.         mTotalHeight = h;  
  67.   
  68.         mOriginSrcRect = new Rect(0, 0, mBitWidth, mBitHeight);  
  69.         // 为了让图水平居中  
  70.         int left = (mTotalWidth - mBitWidth) / 2;  
  71.         mOriginDestRect = new Rect(left, 0, left + mBitWidth, mBitHeight);  
  72.   
  73.         mAvoidSrcRect = new Rect(mOriginSrcRect);  
  74.         // 两张图得间距  
  75.         int distance = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 10,  
  76.                 getResources().getDisplayMetrics());  
  77.         mAvoidDestRect = new Rect(left, mBitHeight + distance, left + mBitWidth, mBitHeight * 2  
  78.                 + distance);  
  79.     }  
  80. }  

 

一起来看看效果:

 

我擦,什么情况,逗我玩儿呢?这时候大家别忘了,前面说过这方法已经在API 16过时了,要在高版本用的话需要关掉硬件加速,什么?硬件加速怎么关...

硬件加速分全局(Application)、Activity、Window、View 四个层级,也简单提及一下:

1.在AndroidManifest.xml文件为application标签添加如下的属性即可为整个应用程序开启硬件加速:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <application android:hardwareAccelerated="true" ...>  

2.在Activity 标签下使用 hardwareAccelerated 属性开启或关闭硬件加速:

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <activity android:hardwareAccelerated="false" />  
3. 在Window 层级使用如下代码开启硬件加速:

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. getWindow().setFlags(    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);  
4.View 级别如下关闭硬件加速,view 层级上没法单独开启硬件加速:

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. setLayerType(View.LAYER_TYPE_SOFTWARE, null);  
好了,原来如此,咱们直接在全局application 关闭硬件加速:

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <application  
  2.         android:allowBackup="true"  
  3.         android:hardwareAccelerated="false"---  

再看下效果:

 

 

 

我们可以看到,现在蓝花已经变成红花了,已经实现了前面说的图标变色小需求,这时候有人可能会说了,这东西还有点用,如果我要在进行某些操作的时候让图标进行颜色的平滑过渡,该怎么办呢?比如viewPager从一页滑到另一页的时候,图标颜色渐变过渡,其实这样的需求只需要在上面的基础上稍加改动即可,提供下思路:

eg:view层级对外提供个接口,传入渐变比例,view里根据比例计算出当前色值,然后实时的把paint的色值更新,重新绘制即可!

好了,AvoidXfermode 就讲这些!

2. PixelXorXfermode

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /**  
  2.  * PixelXorXfermode implements a simple pixel xor (op ^ src ^ dst).  
  3.  * This transformation does not follow premultiplied conventions, therefore  
  4.  * this mode *always* returns an opaque color (alpha == 255). Thus it is  
  5.  * not really usefull for operating on blended colors.  
  6.  */  
  7. @Deprecated  
  8. public class PixelXorXfermode extends Xfermode {  
  9.   
  10.     public PixelXorXfermode(int opColor) {  
  11.         native_instance = nativeCreate(opColor);  
  12.     }  
  13.   
  14.     private static native int nativeCreate(int opColor);  
  15. }  

从上面的介绍上讲,这只是一个简单异或运算,这种变换不满足预乘公约,因此会总是返回一个不透明的颜色,所以对操作颜色混合不是特别的有效;

 

基于以上说明和这个类已经过时,讲解到此结束;

3. PorterDuffXfermode

这个类是setXfermode 方法的核心,也是图层混合模式里的核武器,通过它再加上我们的想象力,就能解决图形图像绘制里的很多问题,首先,还是看下方法说明:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. /**  
  2.  * Create an xfermode that uses the specified porter-duff mode.  
  3.  *  
  4.  * @param mode           The porter-duff mode that is applied  
  5.  */  
  6. public PorterDuffXfermode(PorterDuff.Mode mode) {  
  7.     this.mode = mode;  
  8.     native_instance = nativeCreateXfermode(mode.nativeInt);  
  9. }  

使用 PorterDuff 模式创建一个图层混合模式,如此说来,我们的重心就转移到了 PorterDuff 身上;

 

PorterDuff 是啥,居然没法翻译,我靠,百思不得其姐,如果对图形图像学有所了解,肯定会知道,PorterDuff 实则是两个人名的的组合Thomas Porter 和 Tom Duff ,PorterDuff则是用于描述数字图像合成的基本手法,通过组合使用 Porter-Duff 操作,可完成任意 2D图像的合成;

听起来好像很屌炸天的样子,接下来我们一起来逐个看下这些模式:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public class PorterDuff {  
  2.   
  3.   // these value must match their native equivalents. See SkPorterDuff.h  
  4.   public enum Mode {  
  5.       /** [0, 0] */  
  6.       CLEAR       (0),  
  7.       /** [Sa, Sc] */  
  8.       SRC         (1),  
  9.       /** [Da, Dc] */  
  10.       DST         (2),  
  11.       /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */  
  12.       SRC_OVER    (3),  
  13.       /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */  
  14.       DST_OVER    (4),  
  15.       /** [Sa * Da, Sc * Da] */  
  16.       SRC_IN      (5),  
  17.       /** [Sa * Da, Sa * Dc] */  
  18.       DST_IN      (6),  
  19.       /** [Sa * (1 - Da), Sc * (1 - Da)] */  
  20.       SRC_OUT     (7),  
  21.       /** [Da * (1 - Sa), Dc * (1 - Sa)] */  
  22.       DST_OUT     (8),  
  23.       /** [Da, Sc * Da + (1 - Sa) * Dc] */  
  24.       SRC_ATOP    (9),  
  25.       /** [Sa, Sa * Dc + Sc * (1 - Da)] */  
  26.       DST_ATOP    (10),  
  27.       /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */  
  28.       XOR         (11),  
  29.       /** [Sa + Da - Sa*Da,  
  30.            Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */  
  31.       DARKEN      (12),  
  32.       /** [Sa + Da - Sa*Da,  
  33.            Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */  
  34.       LIGHTEN     (13),  
  35.       /** [Sa * Da, Sc * Dc] */  
  36.       MULTIPLY    (14),  
  37.       /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */  
  38.       SCREEN      (15),  
  39.       /** Saturate(S + D) */  
  40.       ADD         (16),  
  41.       OVERLAY     (17);  
  42.   
  43.       Mode(int nativeInt) {  
  44.           this.nativeInt = nativeInt;  
  45.       }  
  46.   
  47.       /**  
  48.        * @hide  
  49.        */  
  50.       public final int nativeInt;  
  51.   }  

 

可以看到里面通过枚举enum定义了18种混合模式,并且每种模式都写出了对应的计算方法:

其中 Sa 代表source alpha ,即源 alpha 值 ,Da 代表 Destination alpha ,即 目标alpha值 ,Sc 代表 source color ,即源色值 ,Dc 代表 Destination color ,即目标色值,并且这所有的计算都以像素为单位,在某一种混合模式下,对每一个像素的alpha 和 color 通过对应算法进行运算,得出新的像素值,进行展示;

接下来写个view 逐个对以上模式进行测试:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public class PorterDuffXfermodeView extends View {  
  2.   
  3.     private Paint mPaint;  
  4.     private Bitmap mBottomBitmap, mTopBitmap;  
  5.     private Rect mBottomSrcRect, mBottomDestRect;  
  6.     private Rect mTopSrcRect, mTopDestRect;  
  7.   
  8.     private Xfermode mPorterDuffXfermode;  
  9.     // 图层混合模式  
  10.     private PorterDuff.Mode mPorterDuffMode;  
  11.     // 总宽高  
  12.     private int mTotalWidth, mTotalHeight;  
  13.     private Resources mResources;  
  14.   
  15.     public PorterDuffXfermodeView(Context context) {  
  16.         super(context);  
  17.         mResources = getResources();  
  18.         initBitmap();  
  19.         initPaint();  
  20.         initXfermode();  
  21.     }  
  22.   
  23.     // 初始化bitmap  
  24.     private void initBitmap() {  
  25.         mBottomBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.blue)).getBitmap();  
  26.         mTopBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.red)).getBitmap();  
  27.     }  
  28.   
  29.     // 初始化混合模式  
  30.     private void initXfermode() {  
  31.         mPorterDuffMode = PorterDuff.Mode.DST;  
  32.         mPorterDuffXfermode = new PorterDuffXfermode(mPorterDuffMode);  
  33.     }  
  34.   
  35.     private void initPaint() {  
  36.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  37.   
  38.     }  
  39.   
  40.     @Override  
  41.     protected void onDraw(Canvas canvas) {  
  42.         super.onDraw(canvas);  
  43.   
  44.         // 背景铺白  
  45.         canvas.drawColor(Color.WHITE);  
  46.         // 保存为单独的层  
  47.         int saveCount = canvas.saveLayer(0, 0, mTotalWidth, mTotalHeight, mPaint,  
  48.                 Canvas.ALL_SAVE_FLAG);  
  49.         // 绘制目标图  
  50.         canvas.drawBitmap(mBottomBitmap, mBottomSrcRect, mBottomDestRect, mPaint);  
  51.         // 设置混合模式  
  52.         mPaint.setXfermode(mPorterDuffXfermode);  
  53.         // 绘制源图  
  54.         canvas.drawBitmap(mTopBitmap, mTopSrcRect, mTopDestRect, mPaint);  
  55.         mPaint.setXfermode(null);  
  56.         canvas.restoreToCount(saveCount);  
  57.     }  
  58.   
  59.     @Override  
  60.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  61.         super.onSizeChanged(w, h, oldw, oldh);  
  62.         mTotalWidth = w;  
  63.         mTotalHeight = h;  
  64.         int halfHeight = h / 2;  
  65.   
  66.         mBottomSrcRect = new Rect(0, 0, mBottomBitmap.getWidth(), mBottomBitmap.getHeight());  
  67.         // 矩形只画屏幕一半  
  68.         mBottomDestRect = new Rect(0, 0, mTotalWidth, halfHeight);  
  69.   
  70.         mTopSrcRect = new Rect(0, 0, mTopBitmap.getWidth(), mTopBitmap.getHeight());  
  71.         mTopDestRect = new Rect(0, 0, mTotalWidth, mTotalHeight);  
  72.     }  
  73.   
  74.     @Override  
  75.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  76.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  77.     }  
  78.   
  79. }  

 

原图如下:

 



蓝色上下分别为完全不透明和半透区,红色左右为半透和完全不透明区,这样绘制时可以让所有的情况进行交叉,便于分析,先看下默认绘制效果:



(1). CLEAR 

清除模式[0,0],即最终所有点的像素的alpha 和color 都为 0,所以画出来的效果只有白色背景:



(2). SRC -[Sa , Sc]

只保留源图像的 alpha 和 color ,所以绘制出来只有源图,有时候会感觉分不清先绘制的是源图还是后绘制的是源图,这个时候可以这么记,先绘制的是目标图,不管任何时候,一定要做一个有目标的人,目标在前!

这个时候绘制的情形是只有屏幕上的红色圆;


(3). DST -[ Da, Dc ]

同上类比,只保留目标图像的 alpha 和 color,所以绘制出来的只有目标图,也就是屏幕上的的蓝色图;



(4).SRC_OVER - [ Sa +(1-Sa) * Da , Rc = Sc +( 1- Sa ) * Dc]

在目标图片顶部绘制源图像,从命名上也可以看出来就是把源图像绘制在上方;



(5). DST_OVER - [Sa + ( 1 - Sa ) * Da ,Rc = Dc + ( 1 - Da ) * Sc ]

可以和  SRC_OVER 进行类比,将目标图像绘制在上方,这时候就会看到先绘制的蓝色盖在了红色圆的上面;

(6). SRC_IN - [ Sa * Da , Sc * Da ]

在两者相交的地方绘制源图像,并且绘制的效果会受到目标图像对应地方透明度的影响;

(7). DST_IN - [ Sa * Da , Sa * Dc ]

可以和SRC_IN 进行类比,在两者相交的地方绘制目标图像,并且绘制的效果会受到源图像对应地方透明度的影响;


(8). SRC_OUT - [ Sa * ( 1 - Da ) , Sc * ( 1 - Da ) ]

从字面上可以理解为 在不相交的地方绘制 源图像,那么我们来看看效果是不是这样;

这个效果似乎和上面说的不大一样,这个时候我们回归本源[ Sa * ( 1 - Da ) , Sc * ( 1 - Da ) ] ,从公式里可以看到 对应处的 color 是 Sc * ( 1 - Da ) ,如果相交处的目标色的alpha是完全不透明的,这时候源图像会完全被过滤掉,否则会受到相交处目标色 alpha 影响,呈现出对应色值,如果还有问题,大家可以对比上图和普通叠加图,再参考下上面公式理解;

所以该模式总结一下应该是:在不相交的地方绘制源图像,相交处根据目标alpha进行过滤,目标色完全不透明时则完全过滤,完全透明则不过滤;

(9). DST_OUT - [ Da * ( 1 - Sa ) , Dc * ( 1 - Sa ) ]

同样,可以类比SRC_OUT , 在不相交的地方绘制目标图像,相交处根据源图像alpha进行过滤,完全不透明处则完全过滤,完全透明则不过滤;


(10). SRC_ATOP - [ Da , Sc * Da + ( 1 - Sa ) * Dc ]

源图像和目标图像相交处绘制源图像,不相交的地方绘制目标图像,并且相交处的效果会受到源图像和目标图像alpha的影响;

 

(11). DST_ATOP  - [ Sa , Sa * Dc + Sc * ( 1 - Da ) ]

源图像和目标图像相交处绘制目标图像,不相交的地方绘制源图像,并且相交处的效果会受到源图像和目标图像alpha的影响;


 

(12). XOR - [ Sa + Da - 2 * Sa * Da, Sc * ( 1 - Da ) + ( 1 - Sa ) * Dc ]

在不相交的地方按原样绘制源图像和目标图像,相交的地方受到对应alpha和色值影响,按上面公式进行计算,如果都完全不透明则相交处完全不绘制;

 

 

(13). DARKEN - [ Sa + Da - Sa * Da , Sc * ( 1 - Da ) + Dc * ( 1 - Sa ) + min(Sc , Dc) ]

该模式处理过后,会感觉效果变暗,即进行对应像素的比较,取较暗值,如果色值相同则进行混合;

从算法上看,alpha值变大,色值上如果都不透明则取较暗值,非完全不透明情况下使用上面算法进行计算,受到源图和目标图对应色值和alpha值影响;

 

 

同样的,这样的混合效果可以直接在PS里进行简单模拟,创建三个一样的图层,选择对应的混合模式,对于效果表示是一致的:

 

 

(14). LIGHTEN - [ Sa + Da - Sa * Da , Sc * ( 1 -Da ) + Dc * ( 1 - Sa ) + max ( Sc , Dc ) ]

 

可以和 DARKEN 对比起来看,DARKEN 的目的是变暗,LIGHTEN 的目的则是变亮,如果在均完全不透明的情况下 ,色值取源色值和目标色值中的较大值,否则按上面算法进行计算;

 

(15). MULTIPLY - [ Sa * Da , Sc * Dc ]

正片叠底,即查看每个通道中的颜色信息,并将基色与混合色复合。结果色总是较暗的颜色。任何颜色与黑色复合产生黑色。任何颜色与白色复合保持不变。当用黑色或白色以外的颜色绘画时,绘画工具绘制的连续描边产生逐渐变暗的颜色。

 

 

(16). SCREEN - [ Sa + Da - Sa * Da , Sc + Dc - Sc * Dc ]

滤色,滤色模式与我们所用的显示屏原理相同,所以也有版本把它翻译成“屏幕”;

 

简单的说就是保留两个图层中较白的部分,较暗的部分被遮盖;

当一层使用了滤色(屏幕)模式时,图层中纯黑的部分变成完全透明,纯白部分完全不透明,其他的颜色根据颜色级别产生半透明的效果;

(17). ADD - [ Saturate( S+ D ) ]

 饱和度叠加
(18). OVERLAY - 叠加
像素是进行 Multiply (正片叠底)混合还是 Screen (屏幕)混合,取决于底层颜色,但底层颜色的高光与阴影部分的亮度细节会被保留;
以上就是android 提供的所有的混合模式,有了这,只要是图像与图像任何形式混合能创造的效果,我们就都能够进行实现,这时候我们再看看混合模式的示意图:

 

前面我们用AvoidXfermode实现的图标变色小栗子也同样可以使用PorterDuffXfermode进行实现,大家可以自己尝试;

 

最后,我们利用混合模式完成两个小栗子:

一、还算比较流行的一种 loading 形式:

先看下效果:


这个效果如果不知道图像的混合模式,做的话可能会采用2张图,对上面的图进行裁切,但自从有了混合模式,这一切都将变的简单;

我们只需要如下几步:

1.绘制目标图;

2.设置混合模式;

3.绘制带颜色的Rect;

4.不断改变Rect的区域;

代码如下:

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. public class PoterDuffLoadingView extends View {  
  2.   
  3.     private Resources mResources;  
  4.     private Paint mBitPaint;  
  5.     private Bitmap mBitmap;  
  6.   
  7.     private int mTotalWidth, mTotalHeight;  
  8.     private int mBitWidth, mBitHeight;  
  9.     private Rect mSrcRect, mDestRect;  
  10.     private PorterDuffXfermode mXfermode;  
  11.   
  12.     private Rect mDynamicRect;  
  13.     private int mCurrentTop;  
  14.     private int mStart, mEnd;  
  15.   
  16.     public PoterDuffLoadingView(Context context) {  
  17.         super(context);  
  18.         mResources = getResources();  
  19.         initBitmap();  
  20.         initPaint();  
  21.         initXfermode();  
  22.     }  
  23.   
  24.     private void initXfermode() {  
  25.         // 叠加处绘制源图  
  26.         mXfermode = new PorterDuffXfermode(Mode.SRC_IN);  
  27.     }  
  28.   
  29.     private void initPaint() {  
  30.         // 初始化paint  
  31.         mBitPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  32.         mBitPaint.setFilterBitmap(true);  
  33.         mBitPaint.setDither(true);  
  34.         mBitPaint.setColor(Color.RED);  
  35.     }  
  36.   
  37.     private void initBitmap() {  
  38.         // 初始化bitmap  
  39.         mBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.ga_studio))  
  40.                 .getBitmap();  
  41.         mBitWidth = mBitmap.getWidth();  
  42.         mBitHeight = mBitmap.getHeight();  
  43.     }  
  44.   
  45.     @Override  
  46.     protected void onDraw(Canvas canvas) {  
  47.         super.onDraw(canvas);  
  48.         // 存为新图层  
  49.         int saveLayerCount = canvas.saveLayer(0, 0, mTotalWidth, mTotalHeight, mBitPaint,  
  50.                 Canvas.ALL_SAVE_FLAG);  
  51.         // 绘制目标图  
  52.         canvas.drawBitmap(mBitmap, mSrcRect, mDestRect, mBitPaint);  
  53.         // 设置混合模式  
  54.         mBitPaint.setXfermode(mXfermode);  
  55.         // 绘制源图形  
  56.         canvas.drawRect(mDynamicRect, mBitPaint);  
  57.         // 清除混合模式  
  58.         mBitPaint.setXfermode(null);  
  59.         // 恢复保存的图层;  
  60.         canvas.restoreToCount(saveLayerCount);  
  61.   
  62.         // 改变Rect区域,真实情况下时提供接口传入进度,计算高度  
  63.         mCurrentTop -= 8;  
  64.         if (mCurrentTop <= mEnd) {  
  65.             mCurrentTop = mStart;  
  66.         }  
  67.         mDynamicRect.top = mCurrentTop;  
  68.         postInvalidate();  
  69.     }  
  70.   
  71.     @Override  
  72.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  73.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  74.     }  
  75.   
  76.     @Override  
  77.     protected void onSizeChanged(int w, int h, int oldw, int oldh) {  
  78.         super.onSizeChanged(w, h, oldw, oldh);  
  79.         mTotalWidth = w;  
  80.         mTotalHeight = h;  
  81.         mSrcRect = new Rect(0, 0, mBitWidth, mBitHeight);  
  82.         // 让左边和上边有些距离  
  83.         int left = (int) TypedValue.complexToDimension(20, mResources.getDisplayMetrics());  
  84.         mDestRect = new Rect(left, left, left + mBitWidth, left + mBitHeight);  
  85.         mStart = left + mBitHeight;  
  86.         mCurrentTop = mStart;  
  87.         mEnd = left;  
  88.         mDynamicRect = new Rect(left, mStart, left + mBitWidth, left + mBitHeight);  
  89.     }  
  90. }  

二、采用混合模式过滤形状,实现水波纹:

 



文章链接 -自定义view实现水波纹效果

CSDN 源码下载地址:http://download.csdn.net/detail/tianjian4592/8571355

posted @ 2015-07-06 12:02  sky0014  阅读(326)  评论(0编辑  收藏  举报