白鷺のカラーマトリクスの使い方 ColorMatrixFilter

いわゆるフィルター:カラーをフィルター処理した後に表示される画像です。一般的に使用される RGB カラーモードを例に挙げてみましょう。

たとえば、ビットマップは多くのピクセルで構成されており、各ピクセルは異なる強度の赤、緑、青の光で構成されています。

最終的な色が重ね合わされて、これらのピクセルがカラフルな画像を形成します。

Photoshop のチャンネルパネルでは、画像内の赤、緑、青の輝度を簡単に確認できます。

フィルターの原理は、赤、緑、青のチャンネルに対応する色の数を変更することで画像効果を変更することです。

色を表す行列は 4 * 5 行列 (4 行 5 列) で、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 3つの値は同じです

したがって、行列を同じ値に設定することができますが、注意すべき点は、最終的な計算結果が 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 透明度不变
```
もう 1 つの点を追加します。rgb は加法混色モードです。つまり、rgb が最大値 255 を取る場合、結果は白になり、両方が 0 を取る場合、結果は黒になります。したがって、上記の係数が計算後、255を超えるほど大きいと、画像が白く変化します
他の効果には、赤 + 緑 = 黄色など、ある程度の色の知識が必要ですが、これは自分で勉強できます。

最後に、ColorMatrixFilterの使用法をegretに貼り付けます。

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

白鷺のカラーマトリクスの使い方 ColorMatrixFilter

最後に、ColorMatrixFilterの使用法をegretに貼り付けます。

おすすめ