2007-08-28
Flash中的颜色矩阵详细说明 - [Flash component]
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://conoon.blogbus.com/logs/7965865.html
转:
Object
|
+-flash.filters.BitmapFilter
|
+-flash.filters.ColorMatrixFilterpublic class ColorMatrixFilterextends BitmapFilter
ColorMatrixFilter 类使您可以将 4 x 5 矩阵转换应用于输入图像上的每个像素的 RGBA 颜色和 Alpha 值，以产生具有一组新的 RGBA 颜色和 Alpha 值的结果。该类允许饱和度
更改、色相旋转、亮度为 Alpha 以及各种其它效果。可以将此滤镜应用于位图和 MovieClip 实例。
滤镜的具体使用取决于要应用滤镜的对象：
要在运行时对影片剪辑应用滤镜，请使用 filters 属性。设置对象的 filters 属性不会修改对象，清除 filters 属性即可撤消设置操作。
要对 BitmapData 实例应用滤镜，请使用 BitmapData.applyFilter() 方法。对 BitmapData 对象调用 applyFilter() 会获得源 BitmapData 对象和滤镜对象，并最终生成一个过
滤图像。
您也可以在创作时对图像和视频应用滤镜效果。有关更多信息，请参见创作文档。
如果对影片剪辑或按钮应用滤镜，影片剪辑或按钮的 cacheAsBitmap 属性将设置为 true。如果清除所有滤镜，将恢复 cacheAsBitmap 的原始值。
将使用下列公式，其中 a[0] 到 a[19] 对应于 20 个元素的数组属性矩阵中的条目 0 到 19。
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 成分，分别以 srcR、srcG、src 和 srcA 表示。最后一步，将各颜色成分重新组合为一个像素，并写出结果。
计算是对非相乘的颜色值执行的。如果输入图形由预先相乘的颜色值组成，这些值会自动转换为非相乘的颜色值以执行此操作。
可以使用下面两种经过优化的模式。
仅 Alpha。当向滤镜传递仅调整 Alpha 成分的矩阵时，滤镜将优化其性能，如下所示：
1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 N 0 (where N is between 0.0 and 1.0)
更快的版本。仅可用于启用 SSE/Altivec 加速器的处理器，如 Pentium 3 及更高版本、Apple G4 及更高版本。当乘数项在 -15.99 到 15.99 之间，并且加数项 a[4]、a[9]、a
[14] 和 a[19] 在 -8000 到 8000 之间时，将使用加速器。
如果结果图像的宽度或高度将超过 2880 像素，则不应用滤镜。例如，如果您在放大某大型影片剪辑时使用了滤镜，则在结果图像超过 2880 像素的限制时，该滤镜将关闭。
可用性：ActionScript 1.0；Flash Player 8
示例
下面的示例使用 BitmapFilter 来根据鼠标指针的位置操作图像的颜色饱和度。如果将鼠标指针置于左上角 (0,0)，图像应保持不变。随着鼠标指针的右移，绿色通道和蓝色通道
一起从图像中删除。随着鼠标指针的下移，红色通道被删除。如果将鼠标指针置于舞台的右下方，图像应完全变黑。此示例假设您的库中具有链接标识符设置
为"YourImageLinkage"的图像。
import flash.filters.BitmapFilter;
import flash.filters.ColorMatrixFilter;
var image:MovieClip = this.attachMovie("YourImageLinkage", "YourImage", this.getNextHighestDepth());
image.cacheAsBitmap = true;
var listener:Object = new Object();
listener.image = image;
listener.onMouseMove = function()
{
var xPercent:Number = 1 - (_xmouse/Stage.width);
var yPercent:Number = 1 - (_ymouse/Stage.height);
var matrix:Array = new Array();
matrix = matrix.concat([yPercent, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, xPercent, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, xPercent, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:BitmapFilter = new ColorMatrixFilter(matrix);
image.filters = new Array(filter);
}
Mouse.addListener(listener);
listener.onMouseMove();
flash中提供的颜色矩阵可以让我们很容易的动态修改颜色的色相、透明度、饱和度、阴影等，正在慢慢研究中，这里留个地址先
devnet/flash/articles/matrix_transformations/ColorMatrixDemo.swf">http://www.adobe.com/devnet/flash/articles/matrix_transformations/ColorMatrixDemo.swf
一个翻译文章
在flash中可以用矩阵方便的操作颜色。在flash8以前的版本，操作颜色的唯一途径就是通过修改颜色对象中红，绿，蓝三个通道的值，在 Flash8，"颜色矩阵滤镜"
ColorMatrixFilter (flash.filters.ColorMatrixFilter) 在颗粒等级上提供给你更好的控制方法。"颜色矩阵滤镜"为 4行5列的多维矩阵(20个元素的数组)。图 4 是 与"颜色矩
阵滤镜"等同的矩阵。
Flash中的颜色矩阵
R G B A Off
R 1 0 0 0 0
G 0 1 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0
图4. 与"颜色矩阵滤镜"等同的矩阵
红，绿，蓝通道的值由如下所示计算方法所决定：
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，如（图5） 。
Flash中的颜色矩阵
R G B A Off
R 1 0 0 0 100
G 0 1 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0
图5. 红色值增加100
如果想使绿色通道加倍，将a[6]设为2,如（图6）
Flash中的颜色矩阵
R G B A Off
R 1 0 0 0 0
G 0 2 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0
图6. 绿色加倍
如果你要使结果图像中的蓝色与原图的红色数量相等，将a[10]设为1， a[12]设为0 ，如（图7）
Flash中的颜色矩阵
R G B A Off
R 1 0 0 0 0
G 0 1 0 0 0
B 1 0 0 0 0
A 0 0 0 1 0
图7. 红色决定蓝色值
改变图像的亮度，你需要在每个颜色通道的值改变同样的数量。最简单的途径是在每个通道都设置相同的偏移量。偏移量为正时可以增加亮度为负时可以减小亮度。（图8） 是一
个增加亮度的例子。
Flash中的颜色矩阵
R G B A Off
R 1 0 0 0 50
G 0 1 0 0 50
B 0 0 1 0 50
A 0 0 0 1 0
图8. 增加亮度
你也可以通过将每个颜色通道与一个值相乘按比例的改变亮度，大于1的增加亮度小于1减小亮度。
按照原理，将图像转换为灰度图，你需要将每个通道的部分设为等值。因为有三个通道，你可以将每个通道乘以0.33并将它们相加得到结果值。如（图9）
Flash中的颜色矩阵
R G B A Off
R .33 .33 .33 0 0
G .33 .33 .33 0 0
B .33 .33 .33 0 0
A 0 0 0 1 0
图9.灰度图矩阵
由于不同颜色通道的相对屏幕发光度，但是 确实有特殊的提供更加真实的灰度图的"亮度系数"值 。例如在PS里创建一个纯绿色块然后把它放在一个纯蓝色块 ，然后将图像灰度化
，你会看到原来绿色的地方的灰色会比原来蓝色的区域要亮。
在Flash里使用这些矩阵，创建一个"颜色矩阵滤镜"的实例然后将它加入到一个影片剪辑(MovieClip)实例上。下面是一个使绿色加倍的例子：
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);
clip.filters = [colorMat];
"颜色矩阵滤镜"与一个已知的矩阵使用，你可以完成除了亮度和灰度之外复杂的颜色调整。调整对比度，饱和度和色相在 Flash 8种都成为了肯能。虽然在这里讨论这些话题与这
篇文章有些远，但是足以说 Flash 8提供了一个以前任何版本都不能做到的颜色操作途径。
随机文章：
收藏到：Del.icio.us
