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];
    }
}