颜色矩阵滤镜ColorMatrixFilter 简单使用技巧

滤镜是对现有的图片颜色的一种处理方法。而矩阵则做为滤镜的一种很有效的控制数据表达方式。我们先看下颜色的RGB的效果图：
接着我们看下颜色矩阵的结构：

ColorMatrixFilter为4行5列的二维矩阵，第一行表示红色，第二行表示绿色，第三行表示红色，第四行表示透明值。前四列表示意义和四行的意义一样，第五列表示颜色偏差值。

1.先来几组效果了解下：
1.1先看一个组设置：

再看设置后的颜色对比：
我们把蓝色通道设置为0，天蓝色的地方变为了绿色。这是为什么哪？我们知道天蓝色是由绿色和蓝色叠加而来的，我们将蓝色通道的值设置为0，那么此处的蓝色就去除了，剩下的绿色自然就显示出来了。

1.2同时去掉绿色和蓝色：

其效果：
大部分地方都变成红色的了，为什么黑色的地方依然是黑色哪？因为黑色的RGB本身就是接近0，去掉后仍然是0，影响不大。
同样得滤镜，这个为什么没有变成红色，是不是很奇怪？我们分析下，这个草绿色是绿色是占了绝大部分，红色和蓝色本身占的比例就比较小，去掉绿色后，红绿蓝三个色值比例就非常接近了，当红绿蓝三色数值均等时，自然显示的就是灰色。

1.3简单的例子
简单可以这样理解下，正常颜色RGB颜色 #93c2d4,显示为蓝色，当把蓝色 d4去掉时变为#93c200，字体颜色就变为了绿色。

2.矩阵滤镜计算原理

矩阵数据共有4*5=20个数据，我们从上到下，从左到右，一次编号从0开始，比如第一行第一个值是a[0]。srcR表示原图红色通道数值，srcG表示绿色通道，srcB表示蓝色通道，srcA表示透明通道。

2.1计算公式：

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]

计算所得值范围是0-255，超过255的会强制设置为255。矩阵第5列表示偏差值，前四列与原图色值相乘加上第五列偏差值，即为新色值。矩阵第一行计算结果为红色通道值，第二行为绿色，第三行为蓝色，第四行为透明值。

2.2具体实现：
为了简化，我们只对红色通道做对比，第一张图是纯色 #00ffff,红色通道是00，第二张图是纯色#01ffff,红色通道是01。

第一个颜色矩阵：

第一张图使用滤镜后：red = 1*0+0*0+0*0+0*0+0=0   green=0   blue=0  alpha=1 色值变为：#000000,黑色
第二张图使用滤镜后：red = 1*1+0*0+0*0+0*0+0=1   green=0   blue=0  alpha=1 色值变为：#010000,黑色

第二个颜色矩阵：

第一张图使用滤镜后：red = 255*0+0*0+0*0+0*0+0=0   green=0   blue=0  alpha=1 色值变为：#000000,黑色
第二张图使用滤镜后：red = 255*1+0*0+0*0+0*0+0=255   green=0   blue=0  alpha=1 色值变为：#FF0000,红色

第三个颜色矩阵：

第一张图使用滤镜后：red = 1*0+0.5*255+0*0+0*0+0=128   green=0   blue=0  alpha=1 色值变为：#800000,棕色
第二张图使用滤镜后：red = 1*1+0.5*255+0*0+0*0+0=129   green=0   blue=0  alpha=1 色值变为：#810000,棕色

第四个颜色矩阵：

第一张图使用滤镜后：red = 0*0+0*0+0*0+0*0+255=255   green=0   blue=0  alpha=1 色值变为：#FF0000,红色
第二张图使用滤镜后：red = 0*1+0*0+0*0+0*0+255=255   green=0   blue=0  alpha=1 色值变为：#FF0000,红色

本文只是讲解一个比骄浅俗易懂的颜色矩阵原理，颜色矩阵滤镜的效果，要想彻底了解，还是得自己亲自试试，会学习的更快一点。

此篇文章是根据自己的使用经验总结而成，可能存在不对的地方，如有不对的地方欢迎大家指正。