egret ColorMatrixFilter 之 顔色矩陣的用法

所謂濾鏡：就是 過濾 顔色之後呈現的圖像，我們拿常用的rgb顔色模式來說。

比如一張位圖，是由很多像素點組成的，每個像素點都是由不同強度的 紅、綠、藍色光

疊加在一起呈現的最終顔色，然後這些像素點組成了五顔六色的圖像。

在Photoshop 裡的通道面闆，可以輕易看到一個圖像紅、綠、藍三者的發光強度情況。

濾鏡的原理就是通過改變 紅、綠、藍 通道相應的顔色數量，來改變圖像效果的。

表示顔色的矩陣 是一個 4 * 5 矩陣（4行5列） 其中第五清單示一個顔色偏移量

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
           

矩陣與顔色的計算方法如下

// 例如一個原始顔色是 
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	=	結果如下
B	0	0	1	0	0			alpha
A	0	0	0	1	0			1
           

得到最後的結果是

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

           

• 由以上計算方法可知如果希望加完濾鏡顔色與之前一樣可以把矩陣設定為

  [
      1, 0, 0, 0, 0
      0, 1, 0, 0, 0
      0, 0, 1, 0, 0
      0, 0, 0, 1, 0
  ]
  // 計算得結果
  R = 1 * red(即紅色數量還是之前的紅色數量，保持不變)
  G = 1 * green(即綠色數量還是之前的綠色數量，保持不變)
  B = 1 * green(即藍色數量還是之前的藍色數量，保持不變)
  A = 1 * green(即透明度還是之前的透明度，保持不變)
             

• 如果希望圖像變成灰色的（黑白）

  我們知道一個灰色的顔色，它的rgb三個數值是一樣的

  是以我們可以把矩陣都設定為同一個值，有一點需要注意，最終計算的結果如果超過255，會保留到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
  ]
  // 計算得結果
  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 透明度不變
  
             

  補充一點：rgb是加色模式，就是說如果rgb都取最大值255，那麼結果就是一個白色，都取0，那麼結果就是一個黑色是以上面的系數如果大到計算完超過255了那麼圖像就變成了白色
• 其他的一些效果，需要一些顔色知識，比如 紅色 + 綠色 = 黃色，可以自行研究。

最後貼上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);
        
        // 設定顔色濾鏡
        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];
    }
}