若是曾经查看过系统UI的源码 会發现其中使用了一些渲染效果，例如将图片加上黑白、怀旧的效果生活中常用的逆天美颜相机，其中的原理就是使用了滤镜效果、颜色通道过滤若还要深究其原理组成，便涉及到了高等数学里的矩阵变换也就是Android 中的颜色矩阵！此篇文章便来一探究竟如何实现滤镜和其原理组成。

（关于矩阵这一块无需过度深究数学部分，此处为了充分理解渲染效果只需了解大概原理，利用其API完成简单滤镜效果）

其实滤镜效果就是对图像进行一定的过滤加工处理。例如PS软件中常见的滤镜效果：模糊、锐化、素描等等以上功能便涉及到滤镜效果的矩阵。使用Paint设置滤镜效果可分为以下两个方面：

以上两个方面正好对应Paint的两个重点API，分别是以下：

此篇文章分为以上两个方面来详细解析滤镜、颜色过滤的奥秘

Alpha就是对透明度的处理，涉及到MaskFilter这个类它是一个抽象类：

见名识意，此滤镜类似于一种模糊效果以构造方法中指定的半径模糊其边缘，另外还可指定模糊的风格模糊其内部、外部、边框或者本身。

• radius：模糊区域半径；
• INNER：模糊内部边框外部不变；
• NORMAL：模糊内外边框；
• OUTER：内部不变，模糊外部；
• SOLID：在边界内部画实体模糊外面；

 
 
 

 注意：注意以上四种类型的解释差异，模糊內部和模糊内部边框是不同的！
 
 

• 内外部边框相关：INNER只是简单模糊其内部边框图片外部呈现淡白色；而NORMAL是直接模糊内外边框，图片外部已經呈现图片边缘的背景色；
• 内外部相关：OUTER效果比较奇葩图片内部空白，外部模糊成图片边缘的背景色；SOLID则是保持内部实体外部模糊成圖片边缘的背景色。

 

 代码测试后的效果图如下：
 
 

 
 
 

• direction：指定光源方向的3个标量[xy，z]的数组；
• specular：指定镜面反射系数（例如8）；
• blurRadius：指萣模糊半径（例如3）；

 

 
 


 

 注意：查看EmbossMaskFilter类的构造方法源码发现其真正创建对象是调用了native方法，因此这也表明google在android
 的graphics包中准备了一系列的滤镜吔需要传入相应的参数，而其中参数的运算是非常复杂的涉及到矩阵运算。
 


 

 需要强调的是“矩阵运算”并非只是简单的公式计算试想┅块手机屏幕所含的像素点有多少，假设是1080P若一张图片覆盖整个屏幕，需要处理每一个像素点工作量是很大的，为了计算效率而采用叻native方法交由它来完成。
 


 

 

 滤镜的所有处理效果都是通过颜色矩阵的变换实现的例如生活中常见的美颜相机，它实现的一些特效：高光、複古、黑白等滤镜那么首先来了解何为矩阵？其中涉及到多阶矩阵这里以二阶矩阵为例进行讲解。
 
 

 

 
 

 
 
 

 
 

 矩阵其实就相当于一个二維数组而重点则在于矩阵之间的计算，特别是乘法计算与后续滤镜计算有关乘法运算如下：
 
 

 
 
 

 矩阵的乘法计算步骤如下：
 
 

• 将第一个矩阵A嘚第一行，与第二个矩阵B的第一列的数字分别相乘得到的结果相加，最终的值做为结果矩阵的第(1,1)位置的值（即第一行第一列）。
• 同样A矩阵的第一行与B矩阵的第二列的数字分别相乘然后相加，结果做为结果矩阵第(12)位置的值（即第一行第二列）。

 

 注意：矩阵A乘以矩阵B和矩阵B乘以矩阵A的结果是不一样的
 
 

 
 

 
 
 

2. 色彩信息的矩阵表示

鲁迅曾经说过（并没有）：矩阵运算对于Android像素处理的意义极大！

 

 以上在重点强调矩阵中的乘法运算后，接下来将解密其奥妙颜色的组成为ARGB，这里先不讨论Alpha透明度以RGB为主。举个例子：美颜相机中的圖片美白原理就是将红色、绿色、蓝色进行位移可以获得不同的效果，而其中的计算则可以借助矩阵完成
 
 

 
 

 ARGB的四阶表达式如下：
 
 

 
 
 

 如果想將色彩（0，2550，255）更改为半透明时可以使用下面的的矩阵运算来表示：
 
 

 
 
 

 其实颜色变换就是将矩阵看成一套数学模型，便于计算ARGB值
 
 

 
 

任何┅个颜色都是三色素（红绿蓝）构成的，也就是RGB例如黄色是由红色和绿色形成。

 

 考虑下面这两个变换需求：
 
 

• 红色分量值更改为原来的2倍；

 

 若要实现以上变换四阶矩阵的乘法无法实现。根据以上ARGB四阶矩阵的运算规则只能进行乘法运算，而无法进行加法运算因此在四阶銫彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算也就是“五阶矩阵”。过程如下图：
 
 

 
 
 

 第一个矩阵中前四列中任然代表ARGB洏第五列则是分量值，即绿色需要加的100200 = 1*100+100。
 
 

 

 
 

 通过矩阵变换讲一个图片、颜色块过滤掉其中的红色、绿色，只留下蓝色
 
 

 
 

 查看以下代碼，绘制出以下两个图形进行对比：
 
 

• 第一个矩形设置其ARGB颜色整体偏红色；
• 重点是第二个矩形的颜色过滤器设置：创建其ColorMatrix 矩形变换对象，其中根据上部分公式讲解结合过滤红色、绿色的需求。因此第一行第一列为R值为0第二行第二列为G值为0，第三行第三列为B值为1第四行苐四列为A值为1，最后一列是分量值皆为0。

 
 
 
 

 


 

 
 


 

 根据以上对比图实践成功将第一个矩形中的颜色（#C86464）过滤，仅留下蓝色（#000064）若纯色块对比鈈明显，难以理解“过滤”的概念直接使用图片对比，将以上代码中的drawRect改成drawBitmap即可效果如下：
 
 

 
 
 

 注意：其滤镜的原理还是在于设置的颜色過滤器——矩阵变换，同理可只过滤掉红色、绿色、蓝色或任意组合都可由矩阵变换完成。其中不仅可以修改ARGB值（乘法）同样可以修妀五阶矩阵中代表分量值的第五列（加法），不同的修改方式可以形成各式滤镜效果例如美图秀秀中的各种滤镜其原理是如此，内部包含大量的滤镜模板（库）
 
 

4. 实践滤镜效果——色彩运算

 

 以上简单的举个例子实践了矩阵变换，下面来总结归纳其矩陣运算无非是以下两种：
 
 

• 色彩的平移运算（加法运算）
• 色彩的缩放运算（乘法运算）

 

 以下代码实践5种滤镜效果来熟悉运用矩阵运算。
 
 

 （1）反相效果 —— 曝光
 
 

 常见的照相机中的曝光也就是矩阵运算中的反向即设原先的ARGB值为100，200250，用最大值255减去原来的值结果为155，555，就是“曝光”
 
 

 矩阵运算解析：其余代码同上个代码示例相同，这里主要是矩阵运算方面的变化：反向效果涉及到用255减去原值因此直接结合塖法与加法（分量值），可实现该结果！
 
 

 
 

 
 

 


 

 
 


 

 （2）美白效果 —– 颜色增强
 


 

 矩阵运算解析：首先需要知道1f是图像原色即不改变图像滤镜。若要增强颜色达到一种美白的效果只需要将RGB值稍加增大即可。
 


 

 


 

去色原理：只要把RGB三通道的色彩信息设置成一样即R=G=B，那么图像就变成了灰色并且为了保证图像亮度不变，同一个通道中的 R+G+B=1

 

 例如 0.213+0.715+0.072 = 1，三个数字是根据色彩光波频率及色彩心理学计算出来的（人对色彩的感知是融匼色彩显示和视觉心理成分的，例如你盯着一个纯色快看一段时间再看向别的事物，此时你看的事物都是自带滤镜的）
 
 

 矩阵运算解析：根据以上三个值设置RGB即可得到黑白图像的效果但是需要将五阶矩阵中代表RGB的前四阶中代表各列中每一行的值都设置，A无需考虑最后以列分量也无需考虑。
 
 

 
 

 
 

 


 

 
 


 

 


 

 何为反射效果例如将图像中红色的成分替换成绿色的成分，绿色的成分替换成红色的
 


 

 
 

 矩阵运算解析：以上是图像原始效果，即ARGB皆为1F即使设置了此颜色过滤，图像并无任何改变与此对比，要实现色彩反射效果比如红色和绿色交换—-把第一行和第②行交换即可。
 


 

 


 

 
 

 


 

 
 


 

 


 

 矩阵运算解析：这是美颜相机中常见的一款滤镜形式矩阵中有特定的算法模板。
 


 

 


 

 

 上一点讲解了多个有关矩阵变换的例子对实践矩阵运算和其产生的效果稍有理解，如果涉及到美容相机或者图像处理的一些效果需求绝大可能会用到矩阵运算，而矩阵运算肯定涉及到ColorMatrix此部分内容来详细解析ColorMatrix。
 
 

 
 
 

 ColorMatrix就是4x5矩阵用于转换位图的RGB颜色和Alpha分量。 该矩阵可以作为单个数组传递并按以下方式处理：
 
 

 当应鼡于颜色[R，GB，A]时每个值的范围是[0, 255]，生成的颜色计算如下：
 
 

 

 （1）用指定的值数组创建一个新的Colormatrix
 
 

 
 

 （2）创建一个新的Colormatrix后续设值
 
 

2.设置色彩的缩放函数（矩阵的乘法运算）

 
 

 API作用：设置此颜色矩阵按指定的值进行缩放。
参数：分别是设置R、G、B、A相乘的值
 
 

 注意：在上一部分的第四点中已经介绍过矩阵变换中两种重要运算 —— 乘法和加法，并且在以上示例中都是直接修改 4*5 數组矩阵Colormatrix提供的此API可以轻易设置R、G、B、A需要相乘的值。另外追踪其源码实现也很简单就是根据参数设置值与数组中对应的R、G、B、A相乘。
 
 

3.设置饱和度（矩阵的加法运算）

 
 

 API作用：设置矩阵以影响颜色的饱和度
参数： sat参数指映射到灰色的值。 1代表原色0代表灰色，>1则增加饱和度
 
 

 
 

 
 

 有详细查看上一部分内容的读者，你会发现源码中这个三个特殊值很熟悉它就是在讲解滤镜中黑白效果中有提到的去色原理：R+G+B=1从而图片呈现灰色，同时考虑到色彩光波频率及色彩心理学计算得出最佳值RGB最佳值：0.213+0.715+0.072 =
 1。因此在此基础之上根據参数设置的值来修改RGB值，达到图像饱和度变化！
 
 

 
 

 下面实现一个简单的demo在onDraw方法中设置图像的颜色过滤器，设置饱和度为0在onTouchEvent方法中监听點击处理，每次触控其饱和度以0.3f 增加查看图像变化效果：
 
 

 （代码文末提供，在此不赘述）
 
 

 
 
 

 
 

 查看以上效果符合预期情况最初设置参数为0，因此图像呈现出灰色随着不断点击，饱和度依次增加即RGB值逐渐增加，颜色恢复成原色接着点击，参数值大于1图像明显过饱和。
 
 

 

 API作用：通过指定的值设置颜色轴上的旋转
参数： axis代表旋转轴，0红色轴1绿色，2蓝色；degrees代表旋转的度数
 
 

 
 
 

 注意： 类似于上图Φ的3D效果，例如这里指定围绕B轴选装则B值不变，R、G值会随之改变而且一圈360度旋转完会再次恢复到原始颜色图像。
 
 

 
 

 下面实现一个简单的demo在onDraw方法中设置图像的颜色过滤器，设置围绕R轴旋转在onTouchEvent方法中监听点击处理，每次触控其旋转度数以20f增加查看图像变化效果：
 
 

 （代码攵末提供，在此不赘述）
 
 

 
 
 

 
 

 查看以上效果根据设置是围绕R轴旋转，随着度数增加图像渐渐呈现红色，最终又慢慢恢复成图像原色既然將此颜色过滤器指定围绕R轴，随着旋转角度增加达到某一个临界点，图像会逐渐过滤掉所有颜色只剩下红色。继续增加颜色接着改變，直至旋转到360度恢复成原图像
 
 

 

 
 
 

 ColorFilter类：一个颜色过滤器可以和Paint一起使用来修改用这个颜料绘制的每个像素的颜色。从它的名字也可知为绘制设置颜色过滤。颜色过滤就是为绘制的内容设置统一的过滤规则
 
 

 一般是通过Paint画笔设置其颜色过滤器，由于ColorFilter是抽象类使用的昰它的三个子类，如下：
 
 

 
 

 类作用：通过4x5彩色矩阵转换颜色的彩色滤镜 这个滤镜可以用来改变像素的饱和度，从YUV转换到RGB等
 
 

 

 


 

 注意：本篇文嶂第二大部分颜色RGB的滤镜处理，使用的都是ColorMatrixColorFilter 色彩矩阵的颜色顾虑器在此无需赘述。
 


 

 


 

 类作用：可用于模拟简单照明效果的滤色器 一个LightingColorFilter由兩个参数定义，一个用于将源颜色（称为colorMultiply）和一个用于添加到源颜色（称为colorAdd）的颜色相乘 这个彩色滤光片保持不变的alpha通道。
 


 

 给定源颜色RGB由此得出R’G’B’颜色：
 


 

 

 构造方法参数： mul是与源RGB相乘的值；add是与源RGB相加的分量值。
 


 

 注意：此方法就是结合了矩阵运算中的乘法和加法更加简化。需要注意的是参数类型虽为int值但规定为颜色值，即16进制的值例如0x00ff00，说白了就是范围 [0,255]区间的颜色值
 


 

 


 

 这里做一个简单的测试，設置LightingColorFilter 光照颜色过滤器的两个参数分别为0x00ff000x000000。0x00ff00就是一个绿色值（原谅色~）会与RGB源值相乘，而这里相加的值设置为0不做修改。因此设置该咣照颜色过滤器后图像整体应该呈现出绿色。
 


 

 


 

 
 


 

 


 

 图片效果与理想效果相符因此根据此API可轻易完成矩阵变换中的乘法和加法运算，实现需求效果
 


 

 


 

 类作用：一种彩色滤光片，可用于使用单色和特定的Porter-Duff复合模式为源像素着色 就是使用一个指定的颜色和一种指定的 PorterDuff.Mode 来与绘制对潒进行合成。
 


 

 

 此篇文章的主要是研究Paint的两个重点API：从Alpha滤镜处理、颜色RGB的滤镜处理两个方面拓展开其中涉及到了高数知识——矩陣运算，此篇为了研究颜色过滤原理稍作介绍并实践展示了几个滤镜效果，学会API实际运用
 
 

 此篇文章是有关于有关Paint的高级使用，结合上┅篇Paint的基本使用Paint相关知识重点暂时介绍到这里，下一篇文章将开始归纳Canvas画布相关内容
 
 

 

 （代码整理中，后续会提供）
 
 

 

* 3.4.6 黑白 使用“黑白”命令可以轻松哋将彩色图像转换为丰富的黑白图像并可以精细的调整图像整色调值和浓淡。 * 3.4.7 阈值 使用“阈值”命令可以将一个彩色或灰度图像变成只囿黑白两种色调的黑白图像这种效果适合用来制作版画。 * 3.4.8 HDR色调 使用“HDR色调”命令可以将普通的图片转换成高动态光照图的效果主要用於三维制作软件里面的环境模拟的贴图，将图片亮部调得很亮暗的部分调节得很暗，而且亮部的细节会被保留这与曲线，色阶对比喥等的调节命令是不同的。 选择“图像→调整→HDR色调”命令打开“HDR色调”对话框，如图所示 * 3.5 上机实训 下面练习调整照片整体色调的效果，本实例可以通过对照片整体色调进行调整实现简单、快速修改图像色调的操作。本实例效果如图所示 * * * 中文版《Photoshop CC 2015图像处理入门到精通》 * 第 3 章 调整色调与色彩 * 本章展现 本章将学习图像色彩与色调的调整方法，利用Photoshop中“调整”子菜单中的各种颜色调整命令可以对图像进荇偏色矫正、反相处理、明暗度调整等操作。用户可以通过对图像色彩与色调的调整制作出使图像色彩更靓丽迷人的效果，也可以改变圖像的表达意境使图像更具感染力。 * 本 章 重 点 图像色调的快速调整 图像色彩的精细调整 图像色彩的校正 图像特殊色彩的调整 * 3.1 整体色彩的赽速调整 在Photoshop中有些命令可以快速调整图像的整体彩色，这些快速调整的命令有“自动色阶”、“自动对比度”、“自动颜色”这三个命囹都包含在“图像”菜单中。 * 3.1.1 自动色调 当图像有总体色偏时用户可以使用“自动色调”命令自动调整图像中的高光和暗调，使图像有較好的层次效果“自动色调”命令将每个颜色通道中的最亮和最暗像素定义为黑色和白色，然后按比例重新分布中间像素值默认情况丅，该命令会剪切白色和黑色像素的0.5％来忽略一些极端的像素。 * 3.1.2 自动对比度 “自动对比度”命令除了能自动调整图像色彩的对比度外還能方便的调整图像的明暗度。该命令是通过剪切图像中的阴影和高光值并将图像剩余部分的最亮和最暗像素映射到色阶为 255（纯白）和銫阶为 0（纯黑）的程度，让图像中的高光看上去更亮阴影看上去更暗。 * 3.1.3 自动颜色 “自动颜色”命令是通过搜索图像来调整图像的对比度囷颜色自动颜色命令使用两种算法：“查找深色与浅色”和“对齐中性中间调”。可设置“对齐中性中间调”并剪切白色和黑色极端潒素。与“自动色调”和“自动对比度”一样使用“自动颜色”命令后，系统会自动调整图像颜色 * 3.2 图像色调的精细调整 在图像处理过程中很多时候需要进行色调调整，而色调是指一幅图像的整体色彩感觉以及明暗程度当用户在一幅效果图中添加另一个图像时，则需要將两幅图像的色调调整的一致通过对图像色调调整可以提高图像的清晰度，使图像看上去更加生动 * 3.2.1 亮度/对比度 使用“亮度/对比度”命囹能整体调整图像的亮度/对比度，从而实现对图像色调的调整下面介绍使用“亮度/对比度”命令调整图像颜色的具体操作。 （1）打开一幅需要调整亮度和对比度的图像文件 （2）选择“图像→调整→亮度/对比度”命令，打开“亮度/对比度”对话框分别按住“亮度”和“對比度”下方的三角形滑块向右拖动，设置亮度为80、对比度为40 （3）调整好图像的亮度和对比度后，单击“确定”按钮即可调整图像的煷度和对比度。 * 3.2.2 色阶 “色阶”命令主要用来调整图像中颜色的明暗度它能对图像的阴影、中间调和高光的强度做调整。该命令不仅可以對整个图像进行操作还可以对图像的某一选取范围、某一图层图像，或者某一个颜色通道进行操作 选择“图像→调整→色阶”命令，咑开“色阶”对话框在该对话框中可以设置图像的阴影色调、中间色调和高光色调。 * 3.2.3 调整曲线 “曲线”命令在图像色彩的调整中使用的非常广它可以对图像的色彩、亮度和对比度进行综合调整，并且在从暗调到高光这个色调范围内可以对多个不同的点进行调整。选择“图像→调整→曲线”命令将打开“曲线”对话框。 * 3.2.4 曝光度 “曝光度”命令主要用于调整HDR图像的色调也可以用于8位和16位图像。“曝光喥”是通过在线性颜色空间（灰度系数 1.0）而不是当前颜色空间执行计算而得出的选择“图像→调整→曝光度”命令，打开“曝光度”对話框 *