Paint的ColorFilter

时间：2024-01-19 20:35:50

一、简介

setColorFilter(ColorFilter filter)

设置颜色过滤，这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例。我们在setColorFilter(ColorFilter filter)的时候可以直接传入ColorMatrixColorFilter、LightingColorFilter或PorterDuffColorFilter的子类对象作为参数。这些类其实都是colorFilter的子类，下面我们来一个个分析下它们的作用。

二、ColorMatrixColorFilter

中文直译为“色彩矩阵颜色过滤器”，我们要先了解什么是色彩矩阵。在Android中图片是以RGBA像素点的形式加载到内存中的，修改这些像素信息需要一个叫做ColorMatrix类的支持，这个类其实定义的是一个矩阵，是一个4x5的float[]类型的矩阵：

Paint的ColorFilter
ColorMatrix colorMatrix = new ColorMatrix(new float[]{

                1, 0, 0, 0, 0,  // 红色向量

                0, 1, 0, 0, 0,  // 绿色向量

                0, 0, 1, 0, 0,  // 蓝色向量

                0, 0, 0, 1, 0,  // 透明度向量

        });
Paint的ColorFilter

其中，第一行表示的R（红色）的向量，第二行表示的G（绿色）的向量，第三行表示的B（蓝色）的向量，最后一行表示A（透明度）的向量，这一顺序必须要正确不能混淆！你可能会问，那么列呢？我用图例来表示一下。

　　Paint的ColorFilter

　　这个矩阵不同的位置表示的R、G、B、A值，其范围在0.0F至2.0F之间，1为保持原图的RGB值。每一行的第五列数字表示”偏移值“。

　　何为偏移值？顾名思义当我们想让颜色更倾向于红色的时候就增大R向量中的偏移值，想让颜色更倾向于蓝色的时候就增大B向量中的偏移值，这是最最朴素的理解，但是事实上色彩偏移的概念是基于白平衡来理解的。

　　什么是白平衡呢？说得简单点就是白色是什么颜色！在单反的设置参数中有个色彩偏移，其定义的就是白平衡的色彩偏移值，就是当你去拍一张照片的时候白色是什么颜色的，在正常情况下白色是（255, 255, 255, 255）但是“现实世界中我们是无法找到这样的纯白物体的”，所以在我们用单反拍照之前就会拿一个我们认为是白色的物体让相机记录这个物体的颜色作为白色，然后拍摄时整张照片的颜色都会依据这个定义的白色来偏移！而这个我们定义的“白色”（比如：255, 253, 251, 247）和纯白（255, 255, 255, 255）之间的偏移值（0, 2, 4, 8）我们称之为白平衡的色彩偏移。

测试一下：

我们想要绘制一个橙色的圆圈，橙色的效果如下：

Paint的ColorFilter

我们建立一个矩阵，然后看看效果。

Paint的ColorFilter
@Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // 生成色彩矩阵

        ColorMatrix colorMatrix = new ColorMatrix(new float[]{

                1, 0, 0, 0, 0,

                0, 1, 0, 0, 0,

                0, 0, 1, 0, 0,

                0, 0, 0, 1, 0,

        });

        mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix)); 

        // 设置画笔颜色为自定义颜色

        mPaint.setColor(Color.argb(255, 255, 128, 103)); 

        // 绘制圆环 (x坐标，y坐标，半径，画笔)

        canvas.drawCircle(240, 600 / 2, 200, mPaint);

    }
Paint的ColorFilter

看看效果：

Paint的ColorFilter

你会发现颜色没有任何变化，为什么呢？因为矩阵的1表示不做任何变化，也就是保持原样。我们换一个下面的矩阵就能看到效果了。

说明：如果在eclipse实时预览的话，它会提示说如果你设置了这个属性，那么eclipse可能无法准确的给你一个预览图。别担心，实际运行的时候就出来了。

Paint的ColorFilter
　　　　 // 生成色彩矩阵

        ColorMatrix colorMatrix = new ColorMatrix(new float[]{

                0.5F, 0, 0, 0, 0,

                0, 0.5F, 0, 0, 0,

                0, 0, 0.5F, 0, 0,

                0, 0, 0, 1, 0,

        });
Paint的ColorFilter

Paint的ColorFilter

我们来看看这个矩阵是怎么计算的。其实说白了就是矩阵之间的运算乘积：

Paint的ColorFilter

矩阵ColorMatrix的一行乘以矩阵MyColor的一列作为矩阵Result的一行，这里MyColor的RGBA值我们需要转换为[0, 1]。通过这种计算我们可以将我们自己设定的颜色和矩阵的颜色进行叠加，创立一个新的颜色。

再测试一下：

如果我们用它来给图片改颜色，该怎么做呢？下面的例子将会演示一下。

原本图片：

Paint的ColorFilter

加上滤镜后：

Paint的ColorFilter
    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // 生成色彩矩阵

        ColorMatrix colorMatrix = new ColorMatrix(new float[]{

                -1, 0, 0, 1, 1,

                0, -1, 0, 1, 1,

                0, 0, -1, 1, 1,

                0, 0, 0, 1, 0,

        });

        mPaint.setColorFilter(new ColorMatrixColorFilter(colorMatrix)); 

        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);

        canvas.drawBitmap(bitmap,240,600,mPaint);

    }
Paint的ColorFilter

Paint的ColorFilter

这说明，我们可以通过设置滤镜来设置bitmap。如果想要看更多的效果，可以去：http://blog.csdn.net/aigestudio/article/details/41316141 看看。

现在我们知道了，ColorMatrixColorFilter和ColorMatrix就是这么个东西，ColorMatrix类里面也提供了一些实在的方法，比如setSaturation(float sat)设置饱和度，而且ColorMatrix每个方法都用了阵列的计算，如果大家感兴趣可以自己去深挖。

三、LightingColorFilter

顾名思义光照颜色过滤，这肯定是跟光照是有关的了。该类有且只有一个构造方法：

LightingColorFilter (int mul, int add)

mul全称是colorMultiply意为色彩倍增，而add全称是colorAdd意为色彩添加，这两个值都是16进制的色彩值0xAARRGGBB。这个方法使用也是非常的简单。还是拿上面那张图片来说吧，比如我们想要去掉绿色：

Paint的ColorFilter
    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // 设置颜色过滤

        mPaint.setColorFilter(new LightingColorFilter(0xFFFF00FF, 0x00000000));  

        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);

        canvas.drawBitmap(bitmap,240,600,mPaint);

    }
Paint的ColorFilter

Paint的ColorFilter

运行后你会发现绿色确实是没了但是原来偏绿的部分现在居然成了红色，当LightingColorFilter(0xFFFFFFFF, 0x00000000)的时候原图是不会有任何改变的，如果我们想增加红色的值，那么LightingColorFilter(0xFFFFFFFF, 0x00XX0000)就好，其中XX取值为00至FF。

四、PorterDuffColorFilter

PorterDuffColorFilter跟LightingColorFilter一样，只有一个构造方法：

PorterDuffColorFilter(int color, PorterDuff.Mode mode)

这个构造方法也接受两个值，一个是16进制表示的颜色值这个很好理解，而另一个是PorterDuff内部类Mode中的一个常量值，这个值表示混合模式。那么什么是混合模式呢？混合混合必定是有两种东西混才行，第一种就是我们设置的color值而第二种当然就是我们画布上的元素了！也就是说将画布上的元素和我们设置的color进行混合，产生最终的效果。

你可以类比为PS中的混合模式，只是PS的图层混合模式比Android更多更广泛，但两者同名混合模式所产生的效果是一样的，也基于同样的算法原理这里就不多说了。

Paint的ColorFilter

Paint的ColorFilter
    @Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        // 设置颜色过滤

        mPaint.setColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.DARKEN));  

        Bitmap bitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.kale);

        canvas.drawBitmap(bitmap,240,600,mPaint);

    }
Paint的ColorFilter

Paint的ColorFilter

但是这里要注意一点，PorterDuff.Mode中的模式不仅仅是应用于图像色彩混合，还应用于图形混合，比如PorterDuff.Mode.DST_OUT就表示裁剪混合图。

参考自：

http://blog.csdn.net/aigestudio/article/details/41316141

http://blog.csdn.net/xanxus46/article/details/7883554

ColorMatrixFilter色彩矩阵滤镜；

包 flash.filters 
类 public final class ColorMatrixFilter 
继承 ColorMatrixFilter  BitmapFilter  Object 
使用 ColorMatrixFilter 类可以将 4 x 5 矩阵转换应用于输入图像上的每个像素的 RGBA 颜色和 Alpha 值，以生成具有一组新的 RGBA 颜色和 Alpha 值的结果。 该类允许饱和度更改、色相旋转、亮度为 Alpha 以及各种其它效果。 您可以将滤镜应用于任何显示对象（即，从 DisplayObject 类继承的对象），例如 MovieClip、SimpleButton、TextField 和 Video 对象，以及 BitmapData 对象。 
注意：对于 RGBA 值，最高有效字节代表红色通道值，其后的有效字节分别代表绿色、蓝色和 Alpha 通道值。

一、构造方法：

ColorMatrixFilter(matrix:Array = null)；

二、matrix属性详解：

注意；这里的matrix并不是Matrix的实例，其实是一个Array；

matrix:Array  [read-write]

由 20 个项目组成的数组，适用于 4 x 5 颜色转换。 matrix 属性不能通过直接修改它的值来更改（例如 myFilter.matrix[2] = 1;）。 相反，必须先获取对数组的引用，对引用进行更改，然后重置该值。

颜色矩阵滤镜将每个源像素分离成它的红色、绿色、蓝色和 Alpha 成分，分别以 srcR、srcG、srcB 和 srcA 表示。 若要计算四个通道中每个通道的结果，可将图像中每个像素的值乘以转换矩阵中的值。 （可选）可以将偏移量（介于 -255 至 255 之间）添加到每个结果（矩阵的每行中的第五项）中。 滤镜将各颜色成分重新组合为单一像素，并写出结果。 在下列公式中，a[0] 到 a[19] 对应于由 20 个项目组成的数组中的条目 0 至 19，该数组已传递到 matrix 属性：

redResult = (a[0] * srcR) + (a[1] * srcG) + (a[2] * srcB) + (a[3] * srcA) + a[4]

greenResult = (a[5] * srcR) + (a[6] * srcG) + (a[7] * srcB) + (a[8] * srcA) + a[9]

blueResult = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14]

alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19]
 对于数组中的每个颜色值，值 1 等于正发送到输出的通道的 100%，同时保留颜色通道的值。

计算是对非相乘的颜色值执行的。 如果输入图形由预先相乘的颜色值组成，这些值会自动转换为非相乘的颜色值以执行此操作。

可使用两种经过优化的模式：

三、理解、体会；

matrix是一个长度为4*5＝20的数组，其构成如下所示：

var matrix:Array = new Array();

//                                              R  ,G, B,  A, offset
            matrix = matrix.concat([1,  0,  0,  0,  0]); // red
            matrix = matrix.concat([0,  1,  0,  0,  0]); // green
            matrix = matrix.concat([0,  0,  1,  0,  0]); // blue
            matrix = matrix.concat([0,  0,  0,  1,  0]); // alpha

上面是matrix的初始状态。

下面我分先来分析一下其初始状态。

red通道的值：（1，0，0，0，0）表示，R通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜色），色彩偏移量off是0；

。。。

别的通道依次类推。

下面来做一些效果，增加对colorMatrixFilter的认识；

1、调整亮度：

亮度(N取值为-255到255)  
1,0,0,0,N
0,1,0,0,N
0,0,1,0,N
0,0,0,1,0

我们只需要设置一下RGB的色彩偏移就能调节其亮度，是不是很简单呢。

2、颜色反向
-1,0,0,0,255

0,-1,0,0,255

0,0,-1,0,255

0,0,0,1,0

先解释一下颜色反向：就是把0变为255，255变为0，1变为254，254变为1.....

因此，我们只需把RGB通道的原通道乘数设为－1，然后再把色彩偏移量设为255就行了。

3、图像去色：

0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0    , 0    , 0    , 1, 0

1）、首先了解一下去色原理：只要把RGB三通道的色彩信息设置成一样；即：R＝G＝B，那么图像就变成了灰色，并且，为了保证图像亮度不变，同一个通道中的R+G+B=1:如：0.3086+0.6094+0.0820＝1；

2）、三个数字的由来：0.3086, 0.6094, 0.0820；

按理说应该把RGB平分，都是0.3333333。三个数字应该是根据色彩光波频率及色彩心理学计算出来的（本人是这么认为，当然也查询了一些资料，目前尚未找到准确答案。

在作用于人眼的光线中，彩色光要明显强于无色光。对一个图像按RGB平分理论给图像去色的话，人眼就会明显感觉到图像变暗了（当然可能有心理上的原因，也有光波的科学依据）另外，在彩色图像中能识别的一下细节也可能会丢失。我假想：可能绿色的一些东西会丢失。

下面是我从PS中对RGB都为255的明度对比图：

同样的RGB，给人的感觉是绿色最亮，红色次之，蓝色最暗。它们的比例大概是3：6：1，即：0.3086, 0.6094, 0.0820
所以，在给图像去色时我们保留了大量的G通道信息，使得图像不至于变暗或者绿色信息不至于丢失（我猜想）。
4、色彩饱和度
N取值为0到2，当然也可以更高。
0.3086*(1-N) + N, 0.6094*(1-N)    , 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N) + N, 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N)    , 0.0820*(1-N) + N 0, 0,
0        , 0        , 0        , 1, 0
分析：
1、当色彩饱和度低到一定成度的时候，就想当于给图像去色，所以跟第3条：图像去色，有着千丝万缕的联系，在此不想过多解释；
2、N为原有通道信息保留量；可以理解为百分之几，等于0时完全去色，小于1时降低色度，大于1时增加色度，等于2时色度翻一倍，等于3时……。注意：RGB的原有通道信息保留量都应该相等，不然会产生偏色。
3、为什么是这样的计算公式：
N是原通道色彩保留量：所以，在原通道中，我们都+ N，这是不能被别的通道瓜分的。剩余的就是（1－N），就让RGB按0.3086, 0.6094, 0.0820的比例还瓜分这个剩余量吧。

 5、对比度

N取值为0到10
N,0,0,0,128*(1-N)
0,N,0,0,128*(1-N)
0,0,N,0,128*(1-N)
0,0,0,1,0

分析：

所谓对比度就是让红的更红，绿的更绿……或反之。初一想，我们只需要修改RGB的乘数（要一至，不然偏色）。可仔细一琢磨，不对。如果只增加乘数，那么整个图像就会被漂白，（或反之）。好，有办法了，设置色彩偏移量，offset。具体要偏移多少呢，我们找到了一个折中的方案：128（1－N);即：一幅图像，不论很亮或很黑，但对比度为0了，最终得到的都是一幅中性灰度的图像（128），

6、阈值

所谓阈值，就是以一个色度值为基准对图像作非黑即白的处理（注意没有灰色），由于不去除了彩色属性，因此，也离不开0.3086, 0.6094, 0.0820这三组神奇的数字。

(N取值为0到255)

下面的256也可以改成255；（那样就能看到图一和图五的小黑点和小白点）；
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0, 0, 0, 1, 0

分析：

先不看最后面的色彩偏移：-256*N

前面我们提及过，当RGB三个通道的色彩信息一模一样时，图像就失去了色彩（去色），从0.3086*256,0.6094*256,0.0820*256,0,-256*N可以看出：图像已经去色了，并且，（*256）亮度已经翻了256倍（当然也可以是255）；我们知道，RGB的有效值是0－255，即：0，1，2……255，把这些值乘以255以后会出现什么情况呢？但是除了0之外，别的全都大于或等于255了，所以此时的图像除了剩有几个黑点外，其它的全都变成白色了如图一（N＝0）；那么现在我们再作色彩偏移处理：把RGB都减去255；上次值为255（白色）的现在又变成0（黑色了）超过255的仍然是白色，我们不断的反复减255，图2，图3，图4，图5，分别是N＝64，N＝128，n=192,n=255时的图像：

7、色彩旋转

所谓色彩旋转就是让某一个通道的色彩信息让另一个通道去显示；比如，R显示G的信息，G显示B的信息，B显示R的信息，也可以只拿出一部份信息让给别的通道去显示，至于参数的瓜分可以平分。不必太讲究，但是，始终要坚持的一个原则就是每一个通道中的RGB信息量之和一定要为1，不然将会生偏色，如果您要制作偏色效果又另当别论；请偿试下面的参数：

0,1,0,0,0
0,0,1,0,0
1,0,0,0,0
0,0,0,1,0

//---------------

0,0,1,0,0
1,0,0,0,0
0,1,0,0,0
0,0,0,1,0

8、只显示某个通道；

1,0,0,0,0

相关文章