Egret中颜色矩阵和滤镜的使用与介绍

一:颜色矩阵

颜色矩阵说明

颜色矩阵数据说明：
实际的颜色值由下面的公式决定：
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];

公式中 srcR、srcG、srcB、srcA 表示原始显示对象的像素值, a 是颜色矩阵。新的红绿蓝和alpha通道实际由颜色矩阵和原始图片的像素值同时决定。

举证使用实例

与原来一样：

var colorMatrix = [
	1,0,0,0,0,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

红色偏移量：

var colorMatrix = [
	1,0,0,0,100,
	0,1,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

绿色加倍：

var colorMatrix = [
	1,0,0,0,0,
	0,2,0,0,0,
	0,0,1,0,0,
	0,0,0,1,0
];

红色决定蓝色值
如果要使结果图像中的蓝色与原图的红色数量相等，将colorMatrix[10]设为1， colorMatrix[12]设为0 ,即结果的蓝色值完全由原始的红色值决定：

var colorMatrix = [
	1,0,0,0,0,
	0,1,0,0,0,
	1,0,0,0,0,
	0,0,0,1,0
];

增加亮度
增加亮度的最简单途径是给每个颜色值添加相同的偏移量。

var colorMatrix = [
	1,0,0,0,100,
	0,1,0,0,100,
	0,0,1,0,100,
	0,0,0,1,0
];

egret中的使用

颜色矩阵滤镜：colorMatrixFilter(4行5列的多维矩阵共20个元素)
灰度化：：

var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);
//颜色矩阵数组
var colorMatrix = [
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0,0,0,1,0
];
var colorFlilter = new egret.ColorMatrixFilter(colorMatrix);
hero.filters = [colorFlilter];

//获得数组。

var test = colorFlilter.matrix;
//修改数组中的值。
test[4] = 100;  
//重置矩阵。
colorFlilter.matrix = test;

二:egret中的滤镜

光晕滤镜(周围一层光晕)：

var img:egret.Bitmap;
//创建滤镜：
var color:number = 0x33CCFF;        /// 光晕的颜色，十六进制，不包含透明度
var alpha:number = 0.8;             /// 光晕的颜色透明度，是对 color 参数的透明度设定。有效值为 0.0 到 1.0。例如，0.8 设置透明度值为 80%。
var blurX:number = 35;              /// 水平模糊量。有效值为 0 到 255.0（浮点）
var blurY:number = 35;              /// 垂直模糊量。有效值为 0 到 255.0（浮点）
var strength:number = 2;            /// 压印的强度，值越大，压印的颜色越深，而且发光与背景之间的对比度也越强。有效值为 0 到 255。暂未实现
var quality:number = egret.BitmapFilterQuality.HIGH;        /// 应用滤镜的次数，建议用 BitmapFilterQuality 类的常量来体现
var inner:boolean = false;            /// 指定发光是否为内侧发光，暂未实现
var knockout:boolean = false;            /// 指定对象是否具有挖空效果，暂未实现
var glowFilter:egret.GlowFilter = new egret.GlowFilter( color, alpha, blurX, blurY,
    strength, quality, inner, knockout );
//最后对位图对象应用发光滤镜：
img.filters = [ glowFilter ];

在 Egret 中，通过 BlurFilter 类设置模糊滤镜。

var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);
var blurFliter = new egret.BlurFilter( 1 , 1);
hero.filters = [blurFliter];
BlurFilter 有两个参数，即为 x 、y 方向的模糊度。值越大效果越模糊。
可以使用hero.filters = [blurFliter,colorFlilter]; 模糊和颜色矩阵滤镜效果。多个效果同时生效。

投影滤镜

var img:egret.Bitmap;
//创建滤镜，在定义局部变量时，对每一个参数的含义在注释部分进行简要的说明：
var distance:number = 6;           /// 阴影的偏移距离，以像素为单位
var angle:number = 45;              /// 阴影的角度，0 到 360 度
var color:number = 0x000000;        /// 阴影的颜色，不包含透明度
var alpha:number = 0.7;             /// 光晕的颜色透明度，是对 color 参数的透明度设定
var blurX:number = 16;              /// 水平模糊量。有效值为 0 到 255.0（浮点）
var blurY:number = 16;              /// 垂直模糊量。有效值为 0 到 255.0（浮点）
var strength:number = 0.65;                /// 压印的强度，值越大，压印的颜色越深，而且阴影与背景之间的对比度也越强。有效值为 0 到 255。暂未实现
var quality:number = egret.BitmapFilterQuality.LOW;              /// 应用滤镜的次数，暂无实现
var inner:boolean = false;            /// 指定发光是否为内侧发光
var knockout:boolean = false;            /// 指定对象是否具有挖空效果
var dropShadowFilter:egret.DropShadowFilter =  new egret.DropShadowFilter( distance, angle, color, alpha, blurX, blurY,
    strength, quality, inner, knockout );
//最后对位图对象应用投影滤镜：
img.filters = [ dropShadowFilter ];

三:结尾

思了思了,恋了恋了!!

于是-~~-可以不回头+=+地逆风飞翔
不怕心头有雨$v$眼底有霜@@@@@