所謂濾鏡：就是 過(guò)濾 顏色之后呈現(xiàn)的圖像流济，我們拿常用的rgb顏色模式來(lái)說(shuō)。
比如一張位圖雕憔，是由很多像素點(diǎn)組成的糖声，每個(gè)像素點(diǎn)都是由不同強(qiáng)度的 紅、綠琉苇、藍(lán)色光
疊加在一起呈現(xiàn)的最終顏色悦施，然后這些像素點(diǎn)組成了五顏六色的圖像。
在Photoshop 里的通道面板抡诞，可以輕易看到一個(gè)圖像紅、綠肴熏、藍(lán)三者的發(fā)光強(qiáng)度情況顷窒。
濾鏡的原理就是通過(guò)改變 紅、綠鸦做、藍(lán) 通道相應(yīng)的顏色數(shù)量谓着，來(lái)改變圖像效果的。
表示顏色的矩陣 是一個(gè) 4 * 5 矩陣（4行5列） 其中第五列表示一個(gè)顏色偏移量
let matrix = [
1, 0, 0, 0, 0
0, 1, 0, 0, 0
0, 0, 1, 0, 0
0, 0, 0, 1, 0
]
R G B A offset
R 1 0 0 0 0
G 0 1 0 0 0
B 0 0 1 0 0
A 0 0 0 1 0
矩陣與顏色的計(jì)算方法如下
// 例如一個(gè)原始顏色是
let color = [red, green, blue, alpha, 1];
// 那么與matrix相乘后就是加完濾鏡后的顏色
R G B A offset red
R 1 0 0 0 0 green
G 0 1 0 0 0 * blue = 結(jié)果如下
B 0 0 1 0 0 alpha
A 0 0 0 1 0 1
得到最后的結(jié)果是
let m = matrix;
R = m[0]*red + m[1]*green + m[2]*blue + m[3]*alpha + m[4]*1
G = m[5]*red + m[6]*green + m[7]*blue + m[8]*alpha + m[9]*1
B = m[10]*red + m[11]*green + m[12]*blue + m[13]*alpha + m[14]*1
A = m[15]*red + m[16]*green + m[17]*blue + m[18]*alpha + m[19]*1
-
由以上計(jì)算方法可知如果希望加完濾鏡顏色與之前一樣可以把矩陣設(shè)置為
[ 1, 0, 0, 0, 0 0, 1, 0, 0, 0 0, 0, 1, 0, 0 0, 0, 0, 1, 0 ] // 計(jì)算得結(jié)果 R = 1 * red(即紅色數(shù)量還是之前的紅色數(shù)量却音，保持不變) G = 1 * green(即綠色數(shù)量還是之前的綠色數(shù)量，保持不變) B = 1 * green(即藍(lán)色數(shù)量還是之前的藍(lán)色數(shù)量阿纤，保持不變) A = 1 * green(即透明度還是之前的透明度夷陋，保持不變) -
如果希望圖像變成灰色的（黑白）
我們知道一個(gè)灰色的顏色胰锌，它的rgb三個(gè)數(shù)值是一樣的
所以我們可以把矩陣都設(shè)置為同一個(gè)值藐窄，有一點(diǎn)需要注意荆忍，最終計(jì)算的結(jié)果如果超過(guò)255，會(huì)保留到255刹枉。
[ 0.4, 0.4, 0.4, 0, 0 0.4, 0.4, 0.4, 0, 0 0.4, 0.4, 0.4, 0, 0 0, 0, 0, 1, 0 ] // 計(jì)算得結(jié)果 R = 0.4 * red + 0.4 * green + 0.4 * blue G = 0.4 * red + 0.4 * green + 0.4 * blue B = 0.4 * red + 0.4 * green + 0.4 * blue A = 1 * alpha //最后得到的顏色 R = G = B 透明度不變補(bǔ)充一點(diǎn)：rgb是加色模式微宝，就是說(shuō)如果rgb都取最大值255，那么結(jié)果就是一個(gè)白色蟋软，都取0，那么結(jié)果就是一個(gè)黑色所以上面的系數(shù)如果大到計(jì)算完超過(guò)255了那么圖像就變成了白色
其他的一些效果钉稍，需要一些顏色知識(shí)棺耍，比如 紅色 + 綠色 = 黃色蒙袍，可以自行研究。
最后貼上egret中ColorMatrixFilter的使用方式
class Main extends egret.DisplayObjectContainer {
public constructor() {
super();
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.addToStageHandler, this);
}
private addToStageHandler(): void {
var imgLoader: egret.ImageLoader = new egret.ImageLoader;
imgLoader.once(egret.Event.COMPLETE, this.imageLoadHandler, this);
imgLoader.load("resource/assets/bird.png");
}
private imageLoadHandler(evt: egret.Event): void {
let bmd: egret.BitmapData = evt.currentTarget.data;
let texture = new egret.Texture();
texture.bitmapData = bmd;
let bird: egret.Bitmap = new egret.Bitmap(texture);
this.addChild(bird);
// 設(shè)置顏色濾鏡
let colorMatrixFilter = new egret.ColorMatrixFilter(
[
0.4,0.4,0.4,0,0,
0.4,0.4,0.4,0,0,
0.4,0.4,0.4,0,0,
0,0,0,1,0,
]
)
// 給圖片添加顏色濾鏡
bird.filters = [colorMatrixFilter];
}
}
