您的位置: 首页  >  文章  >  Android开发 之 ColorFilter详解

Android开发 之 ColorFilter详解

分类: 文章 • 2025-04-21 17:59:34

ColorFilter详解

转自：http://blog.****.net/abcdef314159 http://blog.****.net/allen315410/article/details/45059989

ColorFilter主要用来处理颜色，这里将讲解它的三个子类，ColorMatrixColorFilter, 
LightingColorFilter以及PorterDuffColorFilter。

1.ColorMatrixColorFilter：

ColorMatrixColorFilter的构造方法很简单，一个是传入数组，一个是传入ColorMatrix类型的对象

[java] view plain copy
  1. public ColorMatrixColorFilter(ColorMatrix matrix) {  
  2.     mMatrix.set(matrix);  
  3.     update();  
  4. }  
[java] view plain copy
  1. public ColorMatrixColorFilter(float[] array) {  
  2.     if (array.length < 20) {  
  3.         throw new ArrayIndexOutOfBoundsException();  
  4.     }  
  5.     mMatrix.set(array);  
  6.     update();  
  7. }  
这里主要来看一下ColorMatrix这个类，它内部有一个数组mArray，其实他保存的是一个4x5颜色矩阵，
[java] view plain copy
  1. *  [ a, b, c, d, e,  
  2. *    f, g, h, i, j,  
  3. *    k, l, m, n, o,  
  4. *    p, q, r, s, t ]  
可以用来修改ARGB的值，其中 第一行决定红色R，第二行决定绿色G，第三行决定蓝色B，第四行决定了透明度A，第五列是颜色的偏移量

而图像的ARGB值存储在一个5*1的颜色分量矩阵中[R, G, B, A,1]。最终运算的结果是两矩阵相乘

[java] view plain copy
  1. R = a*R + b*G + c*B + d*A + e;  
  2. G = f*R + g*G + h*B + i*A + j;  
  3. B = k*R + l*G + m*B + n*A + o;  
  4. A = p*R + q*G + r*B + s*A + t;  
我们看到mArray的大小为20，也就相当于一个4*5的数组，
[java] view plain copy
  1. private final float[] mArray = new float[20];  
在初始化的时候，矩阵的数值会进行初始化
[java] view plain copy
  1. /** 
  2.  * Set this colormatrix to identity: 
  3.  * <pre> 
  4.  * [ 1 0 0 0 0   - red vector 
  5.  *   0 1 0 0 0   - green vector 
  6.  *   0 0 1 0 0   - blue vector 
  7.  *   0 0 0 1 0 ] - alpha vector 
  8.  * </pre> 
  9.  */  
  10. public void reset() {  
  11.     final float[] a = mArray;  
  12.     Arrays.fill(a, 0);  
  13.     a[0] = a[6] = a[12] = a[18] = 1;  
  14. }  
其中第五列是偏移量，比如
[java] view plain copy
  1. [ 1 0 0 0 8    
  2.   0 1 0 0 8     
  3.   0 0 1 0 8     
  4.   0 0 0 1 0 ]   

表示个颜色分量计算完成之后要在加上8，其中最后一行是表示透明度的，一般不要修改。我们来演示一下

[java] view plain copy
  1. public class ColorFilterView extends View {  
  2.     private Paint mPaint;  
  3.     private Bitmap mBitmap;  
  4.     private int padding = 12;  
  5.     float[] colorMatrix = {   
  6.             1, 0, 0, 0, 0, //red  
  7.             0, 0, 0, 0, 0, //green  
  8.             0, 0, 0, 0, 0, //blue  
  9.             0, 0, 0, 1, 0 //alpha    
  10.           };  
  11.     private ColorMatrixColorFilter mLightingColorFilter= new ColorMatrixColorFilter(colorMatrix);  
  12.   
  13.     public ColorFilterView(Context context, AttributeSet attrs) {  
  14.         super(context, attrs);  
  15.         init();  
  16.     }  
  17.   
  18.     private void init() {  
  19.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  20.         mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);  
  21.     }  
  22.   
  23.     @Override  
  24.     protected void onDraw(Canvas canvas) {  
  25.         super.onDraw(canvas);  
  26.         for (int i = 0; i < 8; i++) {  
  27.             mPaint.setColorFilter(mLightingColorFilter);  
  28.             canvas.drawBitmap(mBitmap,  
  29.                     (i % 4) * (mBitmap.getWidth() + padding), (i / 4)  
  30.                             * (mBitmap.getHeight() + padding), mPaint);  
  31.         }  
  32.     }  
  33.   
  34. }  
看一下结果

Android开发 之 ColorFilter详解

再来修改一下

[java] view plain copy
  1. float[] colorMatrix = {   
  2.         1, 0, 0, 0, 0, //red  
  3.         0, 1, 0, 0, 0, //green  
  4.         0, 0, 0, 0, 0, //blue  
  5.         0, 0, 0, 1, 0 //alpha    
  6.       };  
看一下运行结果

Android开发 之 ColorFilter详解

最后在修改一下，让他还原正常图片

[java] view plain copy
  1. float[] colorMatrix = {   
  2.         1, 0, 0, 0, 0, //red  
  3.         0, 1, 0, 0, 0, //green  
  4.         0, 0, 1, 0, 0, //blue  
  5.         0, 0, 0, 1, 0 //alpha    
  6.       };  
看一下结果

Android开发 之 ColorFilter详解

OK，上面的演示完了，我们看下面的一个矩阵。

[java] view plain copy
  1. [ 1 0 0 0 8    
  2.   0 2 0 0 8     
  3.   0 0 3 0 8     
  4.   0 0 0 1 0 ]   
他表示红色分量偏移8，绿色分量*2在偏移8，蓝色分量*3在偏移8。下面看一下主要的方法，setScale(float rScale, float gScale, float bScale, float aScale)
[java] view plain copy
  1. public void setScale(float rScale, float gScale, float bScale,  
  2.                      float aScale) {  
  3.     final float[] a = mArray;  
  4.   
  5.     for (int i = 19; i > 0; --i) {  
  6.         a[i] = 0;  
  7.     }  
  8.     a[0] = rScale;  
  9.     a[6] = gScale;  
  10.     a[12] = bScale;  
  11.     a[18] = aScale;  
  12. }  
这个和矩阵刚初始化的时候差不多，不过这里的值不是1，是我们传入的值，代表的是亮度，我们看一下
[java] view plain copy
  1. public class ColorFilterView extends View {  
  2.     private Paint mPaint;  
  3.     private Bitmap mBitmap;  
  4.     private ColorMatrix colorMatrix = new ColorMatrix();  
  5.     private ColorMatrixColorFilter matrixColorFilter[] = new ColorMatrixColorFilter[24];  
  6.     private int padding = 12;  
  7.   
  8.     public ColorFilterView(Context context, AttributeSet attrs) {  
  9.         super(context, attrs);  
  10.         init();  
  11.     }  
  12.   
  13.     private void init() {  
  14.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  15.         mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);  
  16.         for (int i = 0; i < 24; i++) {  
  17.             if (i < 8)  
  18.                 colorMatrix.setScale(i * .1f, i * .1f, i * .1f, i * .1f);  
  19.             else if (i < 16)  
  20.                 colorMatrix.setScale(i * .1f, i * .1f, i * .1f, i * .1f);  
  21.             else  
  22.                 colorMatrix.setScale(i * .1f, i * .1f, i * .1f, i * .1f);  
  23.             matrixColorFilter[i] = new ColorMatrixColorFilter(colorMatrix);  
  24.         }  
  25.     }  
  26.   
  27.     @Override  
  28.     protected void onDraw(Canvas canvas) {  
  29.         super.onDraw(canvas);  
  30.         for (int i = 0; i < 24; i++) {  
  31.             mPaint.setColorFilter(matrixColorFilter[i]);  
  32.             canvas.drawBitmap(mBitmap,  
  33.                     (i % 4) * (mBitmap.getWidth() + padding), (i / 4)  
  34.                             * (mBitmap.getHeight() + padding), mPaint);  
  35.         }  
  36.     }  
  37. }  

我们看一下运行结果

Android开发 之 ColorFilter详解

再来修改一下

[java] view plain copy
  1. for (int i = 0; i < 24; i++) {  
  2.     if (i < 8)  
  3.         colorMatrix.setScale(i * .1f, i * .3f, i * .9f, i * .1f);  
  4.     else if (i < 16)  
  5.         colorMatrix.setScale(i * .1f, i * .3f, i * .9f, i * .1f);  
  6.     else  
  7.         colorMatrix.setScale(i * .1f, i * .3f, i * .9f, i * .1f);  
  8.     matrixColorFilter[i] = new ColorMatrixColorFilter(colorMatrix);  
  9. }  
看一下运行结果

Android开发 之 ColorFilter详解

再看另一个方法setRotate(int axis, float degrees)，表示的是色相

[java] view plain copy
  1. /** 
  2.  * Set the rotation on a color axis by the specified values. 
  3.  * <p> 
  4.  * <code>axis=0</code> correspond to a rotation around the RED color 
  5.  * <code>axis=1</code> correspond to a rotation around the GREEN color 
  6.  * <code>axis=2</code> correspond to a rotation around the BLUE color 
  7.  * </p> 
  8.  */  
  9. public void setRotate(int axis, float degrees) {  
  10.     reset();  
  11.     double radians = degrees * Math.PI / 180d;  
  12.     float cosine = (float) Math.cos(radians);  
  13.     float sine = (float) Math.sin(radians);  
  14.     switch (axis) {  
  15.     // Rotation around the red color  
  16.     case 0:  
  17.         mArray[6] = mArray[12] = cosine;  
  18.         mArray[7] = sine;  
  19.         mArray[11] = -sine;  
  20.         break;  
  21.     // Rotation around the green color  
  22.     case 1:  
  23.         mArray[0] = mArray[12] = cosine;  
  24.         mArray[2] = -sine;  
  25.         mArray[10] = sine;  
  26.         break;  
  27.     // Rotation around the blue color  
  28.     case 2:  
  29.         mArray[0] = mArray[6] = cosine;  
  30.         mArray[1] = sine;  
  31.         mArray[5] = -sine;  
  32.         break;  
  33.     default:  
  34.         throw new RuntimeException();  
  35.     }  
  36. }  
其中axis为0时表示的是红色分量旋转的角度，为1时是绿色分量旋转的角度，为2时是蓝色分量旋转的角度，
[java] view plain copy
  1. for (int i = 0; i < 24; i++) {  
  2.     if (i < 8)  
  3.         colorMatrix.setRotate(0, i*50);  
  4.     else if (i < 16)  
  5.         colorMatrix.setRotate(1, i*50);  
  6.     else  
  7.         colorMatrix.setRotate(2, i*50);  
  8.     matrixColorFilter[i] = new ColorMatrixColorFilter(colorMatrix);  
  9. }  
看一下运行结果

Android开发 之 ColorFilter详解

再来修改一下

[java] view plain copy
  1. for (int i = 0; i < 24; i++) {  
  2.     if (i < 8)  
  3.         colorMatrix.setRotate(0, i*50);  
  4.     else if (i < 16)  
  5.         colorMatrix.setRotate(1, (i%8)*50);  
  6.     else  
  7.         colorMatrix.setRotate(2, (i%8)*50);  
  8.     matrixColorFilter[i] = new ColorMatrixColorFilter(colorMatrix);  
  9. }  

看一下运行结果

Android开发 之 ColorFilter详解

再看另一个方法setSaturation(float sat)，代表的是饱和度，其中0是灰色，1是正常

[java] view plain copy
  1. for (int i = 0; i < 24; i++) {  
  2.     if (i < 8)  
  3.         colorMatrix.setSaturation(i*.2f);  
  4.     else if (i < 16)  
  5.         colorMatrix.setSaturation(i*.5f);  
  6.     else  
  7.         colorMatrix.setSaturation(i*2f);  
  8.     matrixColorFilter[i] = new ColorMatrixColorFilter(colorMatrix);  
  9. }  
运行结果为

Android开发 之 ColorFilter详解

setConcat(ColorMatrix matA, ColorMatrix matB)，两矩阵相乘

[java] view plain copy
  1. public void setConcat(ColorMatrix matA, ColorMatrix matB) {  
  2.     float[] tmp;  
  3.     if (matA == this || matB == this) {  
  4.         tmp = new float[20];  
  5.     } else {  
  6.         tmp = mArray;  
  7.     }  
  8.   
  9.     final float[] a = matA.mArray;  
  10.     final float[] b = matB.mArray;  
  11.     int index = 0;  
  12.     for (int j = 0; j < 20; j += 5) {  
  13.         for (int i = 0; i < 4; i++) {  
  14.             tmp[index++] = a[j + 0] * b[i + 0] +  a[j + 1] * b[i + 5] +  
  15.                            a[j + 2] * b[i + 10] + a[j + 3] * b[i + 15];  
  16.         }  
  17.         tmp[index++] = a[j + 0] * b[4] +  a[j + 1] * b[9] +  
  18.                        a[j + 2] * b[14] + a[j + 3] * b[19] +  
  19.                        a[j + 4];  
  20.     }  
  21.   
  22.     if (tmp != mArray) {  
  23.         System.arraycopy(tmp, 0, mArray, 0, 20);  
  24.     }  
  25. }  
preConcat(ColorMatrix prematrix)前乘，postConcat(ColorMatrix postmatrix)后乘，调用的都是setConcat(ColorMatrix matA, ColorMatrix matB)方法，因为矩阵的乘法不具有交换律，改变两个矩阵的位置会产生不同的结果。

2.LightingColorFilter：

再来看ColorFilter的另一个子类LightingColorFilter光线颜色过滤，就一个构造方法

[java] view plain copy
  1. public LightingColorFilter(int mul, int add) {  
  2.     mMul = mul;  
  3.     mAdd = add;  
  4.     update();  
  5. }  
mul表示颜色增加的倍数，add为色彩增加，
[java] view plain copy
  1. public class ColorFilterView extends View {  
  2.     private Paint mPaint;  
  3.     private Bitmap mBitmap;  
  4.     private LightingColorFilter mLightingColorFilter[] = new LightingColorFilter[8];  
  5.     private int padding = 12;  
  6.   
  7.     public ColorFilterView(Context context, AttributeSet attrs) {  
  8.         super(context, attrs);  
  9.         init();  
  10.     }  
  11.   
  12.     private void init() {  
  13.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  14.         mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon);  
  15.         //不变  
  16.         mLightingColorFilter[0] = new LightingColorFilter(0xFFFFFFFF,  
  17.                 0x00000000);  
  18.         //去掉红色  
  19.         mLightingColorFilter[1] = new LightingColorFilter(0xFF00FFFF,  
  20.                 0x00000000);  
  21.         //去掉绿色  
  22.         mLightingColorFilter[3] = new LightingColorFilter(0xFFFF00FF,  
  23.                 0x00000000);  
  24.         //去掉蓝色  
  25.         mLightingColorFilter[4] = new LightingColorFilter(0xFFFFFF00,  
  26.                 0x00000000);  
  27.         //增加红色  
  28.         mLightingColorFilter[5] = new LightingColorFilter(0xFFFFFFFF,  
  29.                 0x00560000);  
  30.         //增加绿色  
  31.         mLightingColorFilter[6] = new LightingColorFilter(0xFFFFFFFF,  
  32.                 0x00006400);  
  33.         //增加蓝色  
  34.         mLightingColorFilter[7] = new LightingColorFilter(0xFFFFFFFF,  
  35.                 0x00000056);  
  36.     }  
  37.   
  38.     @Override  
  39.     protected void onDraw(Canvas canvas) {  
  40.         super.onDraw(canvas);  
  41.         for (int i = 0; i < 8; i++) {  
  42.             mPaint.setColorFilter(mLightingColorFilter[i]);  
  43.             canvas.drawBitmap(mBitmap,  
  44.                     (i % 4) * (mBitmap.getWidth() + padding), (i / 4)  
  45.                             * (mBitmap.getHeight() + padding), mPaint);  
  46.         }  
  47.     }  
  48.   
  49. }  
运行结果为

Android开发 之 ColorFilter详解


3.PorterDuffColorFilter
ColorFilter下还有最后一个子类，PorterDuff混合模式的色彩过滤器，下面是其构造器：

[java] view plain copy
 print?
  1. public PorterDuffColorFilter(int color, PorterDuff.Mode mode)  
Google文档：PorterDuff滤光器可以用于点源像素使用一个单一的颜色和一个特定的波特达夫复合模式。

PorterDuffColorFilter的构造器也很简单，其中第一个参数表示一个16进制的色彩值，第二个参数是一个枚举值PorterDuff.Mode，表示图片混排的模式，PorterDuff.Mode在Android下一共有16种。下面我们先写一个小例子看一下，这里我们还是使用上面的图片，为原图添加图片混排模式，颜色值设置为红色0XFFFF0000，混排模式设置为PorterDuff.Mode.DARKEN。

[java] view plain copy
 print?
  1. public class CustomView2 extends View {  
  2.   
  3.     private Context mContext;  
  4.     private Paint mPaint;  
  5.     private Bitmap mBitmap;  
  6.     private int x, y;  
  7.   
  8.     public CustomView2(Context context) {  
  9.         this(context, null);  
  10.     }  
  11.   
  12.     public CustomView2(Context context, AttributeSet attrs) {  
  13.         super(context, attrs);  
  14.         mContext = context;  
  15.         initRes();  
  16.         initPaint();  
  17.     }  
  18.   
  19.     private void initRes() {  
  20.         //获取图片  
  21.         mBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.image);  
  22.         //获取图片显示起始位置  
  23.         x = ScreenUtil.getScreenW(mContext) / 2 - mBitmap.getWidth() / 2;  
  24.         y = ScreenUtil.getScreenH(mContext) / 2 - mBitmap.getHeight() / 2;  
  25.     }  
  26.   
  27.     private void initPaint() {  
  28.         mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);  
  29.         PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(0XFFFF0000, PorterDuff.Mode.DARKEN);  
  30.         mPaint.setColorFilter(colorFilter);  
  31.     }  
  32.   
  33.     @Override  
  34.     protected void onDraw(Canvas canvas) {  
  35.         canvas.drawBitmap(mBitmap, x, y, mPaint);  
  36.     }  
  37. }  
Android开发 之 ColorFilter详解

上面的图片就是运行之后的效果了，原图不仅变红了，而且还变暗了。其实我们这里将PorterDuffColorFilter的构造器参数拆开来分析一下，首先我们传递进去一个红色的颜色值0XFFFF0000，这里相当于创建了一张新的图层，图层的颜色就是0XFFFF0000，而我们的原图可以看作是第二张图层，我们先把这2个图片重叠放在一起，就会发现得到一个原图上很红的图片，然后我们看一下PorterDuff.Mode是DARKEN模式，表示在之前得到的“原图+很红”的图片上进一步将色调调成暗色，最终得到了如上所示的图片。

关于PorterDuff.Mode，Android系统一共提供了18种混排模式，在模拟器的ApiDemos/Graphics/XferModes，有张效果图：

Android开发 之 ColorFilter详解

这张图可以很形象的说明图片各种混排模式下的效果。其中Src代表原图，Dst代表目标图，两张图片使用不同的混排方式后，得到的图像是如上图所示的。PorterDuff.Mode也提供了18种混排模式已经算法，其中比上图多了ADD和OVERLAY两种模式：

Android开发 之 ColorFilter详解

其中Sa全称为Source alpha表示源图的Alpha通道；Sc全称为Source color表示源图的颜色；Da全称为Destination alpha表示目标图的Alpha通道；Dc全称为Destination color表示目标图的颜色，[...,..]前半部分计算的是结果图像的Alpha通道值，“,”后半部分计算的是结果图像的颜色值。图像混排后是依靠这两个值来重新计算ARGB值的，具体计算算法，抱歉，我也不知道，不过不要紧，不了解计算算法也不影响我们程序员写程序的。我们只要对照上面的apiDemo中提供的图片就能推测出混排后的结果的，下面是在网上找到的汉字语言描述，感谢这位作者的总结。

注意：先绘制dst，再绘制src。

1.PorterDuff.Mode.CLEAR
    所绘制源图像不会提交到画布上。
2.PorterDuff.Mode.SRC
    只显示源图像。
3.PorterDuff.Mode.DST
    只显示目标图像。
4.PorterDuff.Mode.SRC_OVER
    正常绘制显示，源图像居上显示。
5.PorterDuff.Mode.DST_OVER
    上下层都显示。目标图像居上显示。
6.PorterDuff.Mode.SRC_IN
    取两层绘制交集中的源图像。
7.PorterDuff.Mode.DST_IN
     取两层绘制交集中的目标图像。
8.PorterDuff.Mode.SRC_OUT
    只在源图像和目标图像不相交的地方绘制源图像。
9.PorterDuff.Mode.DST_OUT
    只在源图像和目标图像不相交的地方绘制目标图像。
10.PorterDuff.Mode.SRC_ATOP
    在源图像和目标图像相交的地方绘制源图像，在不相交的地方绘制目标图像。
11.PorterDuff.Mode.DST_ATOP
   在源图像和目标图像相交的地方绘制目标图像而在不相交的地方绘制源图像。
12.PorterDuff.Mode.XOR
    异或：去除两图层交集部分
13.PorterDuff.Mode.DARKEN
     取两图层全部区域，交集部分颜色加深
14.PorterDuff.Mode.LIGHTEN
    取两图层全部，点亮交集部分颜色
15.PorterDuff.Mode.MULTIPLY
    取两图层交集部分叠加后颜色
16.PorterDuff.Mode.SCREEN
    滤色。




相关推荐