文档章节

[转]ColorMatrixFilter--颜色矩阵滤镜

卧雪Sirk
 卧雪Sirk
发布于 2016/03/19 08:54
字数 821
阅读 11
收藏 0

ColorMatrixFilter--颜色矩阵滤镜(flash.filters.ColorMatrixFilter) 在颗粒等级上提供给你更好的控制方法。ColorMatrixFilter为 4行5列的多维矩阵(20个元素的数组)。图1是与ColorMatrixFilter等同的矩阵:

ColorMatrixFilter--颜色矩阵滤镜

图1. 与ColorMatrixFilter等同的矩阵

    红,绿,蓝通道的值由如下所示计算方法所决定:
    CODE:

 

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]

      可以看出,第一行的值决定了红色值,第二行决定绿色,第三行蓝色,第四行是透明(Alpha)通道值。同样可以看出首四栏值是与红,绿,蓝,alpha通道值的乘积,而第五栏的值分别是和(偏移量)。注意每行的源值和结果值都是在0到255的区间内。因此即使各个通道的值小于0或大于255都会被强制到该区间内。我来举些例子说明它的原理。
      如果你想在红色通道加100(偏移量),将a[4]设置为100,如图2:

 

ColorMatrixFilter--颜色矩阵滤镜

图2. 红色值增加100

    如果想使绿色通道加倍,将a[6]设为2,如图3:

ColorMatrixFilter--颜色矩阵滤镜

图3. 绿色加倍

    如果你要使结果图像中的蓝色与原图的红色数量相等,将a[10]设为1, a[12]设为0 ,如图4:

ColorMatrixFilter--颜色矩阵滤镜

图4. 红色决定蓝色值

    改变图像的亮度,你需要在每个颜色通道的值改变同样的数量。最简单的途径是在每个通道都设置相同的偏移量。偏移量为正时可以增加亮度为负时可以减小亮度。图5是一个增加亮度的例子:

ColorMatrixFilter--颜色矩阵滤镜

图5. 增加亮度

    你也可以通过将每个颜色通道与一个值相乘按比例的改变亮度,大于1的增加亮度小于1减小亮度。
按照原理,将图像转换为灰度图,你需要将每个通道的部分设为等值。因为有三个通道,你可以将每个通道乘以0.33并将它们相加得到结果值。如图6:

ColorMatrixFilter--颜色矩阵滤镜

图6.灰度图矩阵

    由于不同颜色通道的相对屏幕发光度,但是确实有特殊的提供更加真实的灰度图的“亮度系数”值。例如在PS里创建一个纯绿色块然后把它放在一个纯蓝色块,然后将图像灰度化,你会看到原来绿色的地方的灰色会比原来蓝色的区域要亮。
    在Flash里使用这些矩阵,创建一个ColorMatrixFilter的实例然后将它加入到一个影片剪辑(MovieClip)实例上。下面是一个使绿色加倍的例子:
    CODE:

 

import flash.filters.ColorMatrixFilter;
var mat:Array = [ 1,0,0,0,0,
                  0,2,0,0,0,
                  0,0,1,0,0,
                  0,0,0,1,0 ];
var colorMat:ColorMatrixFilter = new ColorMatrixFilter(mat);
mc.filters = [colorMat];

 

    ColorMatrixFilter与一个已知的矩阵使用,你可以完成除了亮度和灰度之外复杂的颜色调整。调整对比度,饱和度和色相等。
    下面是Adobe官方提供的一个ColorMatrixFilter操作图像的在线演示图:

    ColorMatrixFilter 

下载地址:http://www.adobe.com/devnet/flash/articles/matrix_transformations/ColorMatrixDemo.swf

 

© 著作权归作者所有

共有 人打赏支持
卧雪Sirk

卧雪Sirk

粉丝 0
博文 60
码字总数 23226
作品 4
杭州
技术主管
私信 提问
学习 PixiJS — 视觉效果

平铺精灵 平铺精灵是一种特殊的精灵,可以在一定的范围内重复一个纹理。你可以使用它们创建无限滚动的背景效果。要创建平铺精灵,需要使用带有三个参数的 TilingSprite 类(PIXI.extras.Til...

FEWY
02/03
0
0
Android 高级UI7 滤镜效果和颜色通道过滤

Android 高级UI 目录 滤镜效果:对图像进行一定的过滤加工处理。使用Paint设置滤镜效果 1.MaskFilter遮罩滤镜处理 (1)模糊遮罩滤镜 (BlurMaskFilter) (2)浮雕遮罩滤镜(EmbossMaskFilter) 2.颜...

香沙小熊
02/20
0
0
android中bitmap置灰以及变成任意你想要的颜色方法

在android中颜色是由一堆数字来存储的确切的说是一个5*4的二维矩阵,,而bitmap图片的颜色矩阵是有一个5*1的矩阵存储的分别是rgb透明度,第五列颜色偏移量。(M*C)通常在改变一个图片的颜色改...

找到组织
2014/01/09
5.4K
2
前端开发者如何利用 CSS 实现酷炫的变色方案?

作者 | 小胡 责编 | 郭芮 说到图片处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hov...

CSDN资讯
2018/12/22
0
0
数字图像处理、拼接,图像静态滤镜(GPUImage/GPU加速) - Android

图像滤镜处理的两种方式:RGB点乘运算;GPU的矩阵运算(效率更高)。图片处理中的计算:RGBA~利用自带的方法修改色调,饱和度,亮度来修改图片;矩阵~利用矩阵计算得到新的矩阵修改图片。 几个...

元谷
03/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

AWS的自动部署工具codedeploy 部署前的准备工作

开始部署codedeploy: 1.先预置IAM用户: 创建一个IAM用户或使用一个与AWS相关联的用户; 复制以下的策略附加到IAM用户,向IAM用户赋予对codedeploy(及codedeploy所依赖的AWS服务和操作)的...

守护-创造
6分钟前
0
0
这可能是最详细的一线大厂Mysql面试题详解了

1、MySQL的复制原理以及流程 基本原理流程,3个线程以及之间的关联; 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中; 从:io线程——在使用start slave 之后...

Java干货分享
16分钟前
0
0
人的精力是什么?如何强化精力

人的精力是什么? 人的精力是什么? 精力指精神和体力。精神包括一个人的精神状态,兴奋度,做事情的投入度,专注度,持续时间等。 人的精力来源 人的精力有4种来源,身体的、情感的、思想的和...

莫库什勒
34分钟前
0
0
JFinal开发的旅游线路营销Saas平台演示系统我部署了一个

今天部署了一个旅游线路营销管理系统的演示版: 演示地址:http://lvyou.jfinalxueyuan.com 演示账号:(暂时只给一个门店版的吧,批发商和总部的如果需要 演示看看 单独联系我微信:1876673...

山东-小木
今天
2
0
如何学习大数据技术

学习大数据技术,首先要明确大数据的概念。 大数据的概念作者认为有如下几点: 1.数据的来源多样性。例如关系数据库+文本+excel等 2.数据量大。TB级别的数据。 3.业务应用领域。实时性高与实...

董黎明
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部