Egret中图片颜色的改变，颜色矩阵

Posted 2022-06-14 gamedaybyday

参考：

图片处理：颜色矩阵和坐标变换矩阵

Egret-滤镜

 

之前面试有问到如何改变图片的颜色。貌似之前做Flash的时候做过，做Egret后没有此类需求，所以一直没有研究过。

现在来弄一弄如何改变图片的颜色。

 

目录

一 图片像素的颜色值

二 滤镜

三 颜色矩阵

四 应用场景

 

一 图片像素的颜色值

创建一个位图，并打印位图的颜色值

let bm:egret.Bitmap = new egret.Bitmap();
bm.texture = RES.getRes("preload_start_png");  
this.addChild(bm);
console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

 

 

输出

 

可以看到图片的颜色都是由这个数组保存。要改变图片的颜色，我首先想到是不是改变这个数组的值就能改变图片颜色。但是Egret没有提供接口改变这个数组的值，所以作罢了。

 

二 滤镜

给图片增加一个变灰效果

          let bm:egret.Bitmap = new egret.Bitmap();
          bm.texture = RES.getRes("preload_start_png");  
          this.addChild(bm);
          console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

          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);
        bm.filters = [colorFlilter];

 

未使用滤镜前

使用滤镜后

　　

那么使用滤镜后，是否改变了texture的颜色值呢，我输出了一下

          let bm:egret.Bitmap = new egret.Bitmap();
          bm.texture = RES.getRes("preload_start_png");  
          this.addChild(bm);
          console.log("使用滤镜前：")
          console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

          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);
        bm.filters = [colorFlilter];
        console.log("使用滤镜后：");
        console.log(bm.texture.getPixels(0,0,bm.width,bm.height));

　

输出，发现颜色值并没有改变。猜测滤镜是在原颜色基础值上，经过颜色矩阵计算后再输出成最终图片的。　

 

 三 颜色矩阵

 

我们使用几个矩阵来测试下。

 

原颜色值：

A = [ 1,0,0,0,0,

        0,1,0,0,0,

        0,0,1,0,0,

        0,0,0,1,0 ]

 

得出结果是

R’  = R

G’  = G

B’  = B

A’  = A

 

 

变灰色：

A = [ 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 ]

 

得出结果是

R’  = 0.3*R + 0.6*G 

G’  = 0.3*R + 0.6*G

B’  = 0.3*R + 0.6*G

A’  = A

 

 

 增加亮度：

A = [ 1,0,0,0,100,

        0,1,0,0,100,

        0,0,1,0,0,

        0,0,0,1,0 ]

 

得出结果是

R’  = R + 100 

G’  = G + 100

B’  = B

A’  = A

 

 

 

 

 

四 应用场景

1. 游戏中禁止使用某个按钮，需要将按钮变灰时。

    平时都是美术出一个普通按钮和一个灰色按钮。

2. 游戏中使用多张相同图片，但是仅仅是图片颜色不同时。