ColorMatrixColorFilterを使って画像の色を加工して表示する

昔からあるのに知らなかったシリーズ

ImageViewではColorFilterを設定して色を変更することができます。
ColorFilterとして色を設定する場合、内部的にはPorterDuffColorFilterが使われ、Tintで指定するのと同様にアルファチャンネルを除いてすべて同じ色に塗りつぶされます（PorterDuff.Modeを指定しない場合）
アイコンに着色する目的で使う場合は、Tintを指定する場合がほとんどで、使われる機会も減っているように思います。

このColorFilterにはほかにもバリエーションがあり、ColorMatrixColorFilterもその一つです。

ColorMatrixColorFilterはその名の通り、ColorMatrixを使って、色を変換して表示することができます。

ColorMatrixはリンク先に説明がありますが、4x5の行列で定義します。

  [ a, b, c, d, e,
    f, g, h, i, j,
    k, l, m, n, o,
    p, q, r, s, t ]

これをもとの色のRGBAに対して以下の計算を行い、色の変換を行います。

   R’ = a*R + b*G + c*B + d*A + e;
   G’ = f*R + g*G + h*B + i*A + j;
   B’ = k*R + l*G + m*B + n*A + o;
   A’ = p*R + q*G + r*B + s*A + t;

API Level1からある仕組みです

変化なし

これを設定する意味は全くありませんが、変換の仕組みを確認するために何も変化が起こらない行列を指定してみます。
以下の指定をすると、元の色のRGBAをそのまま採用することになるので、何も変化が起こりません。

imageView.colorFilter = ColorMatrixColorFilter(
    floatArrayOf(
        1f, 0f, 0f, 0f, 0f,
        0f, 1f, 0f, 0f, 0f,
        0f, 0f, 1f, 0f, 0f,
        0f, 0f, 0f, 1f, 0f,
    )
)

R' = R
G' = G
B' = B
A' = A
という変換で変化なしとなります。

ネガ・ポジ反転

RGBに-1をかけ、255から引く形の行列を指定するとネガポジ反転した色で表示させることができます。

imageView.colorFilter = ColorMatrixColorFilter(
    floatArrayOf(
        -1f, 0f, 0f, 0f, 255f,
        0f, -1f, 0f, 0f, 255f,
        0f, 0f, -1f, 0f, 255f,
        0f, 0f, 0f, 1f, 0f,
    )
)

R' = 255 - R
G' = 255 - G
B' = 255 - B
A' = A
という変換ですね。

元画像	colorFilter指定

グレースケール変換

RGB各色を計算して輝度を計算します。輝度計算の係数は色空間によって異なりますが、ITU-R BT.709/sRGBの場合、0.2126, 0.7152, 0.0722が使われます。これをRGBで同じ値を指定するとグレースケール変換ができます。

imageView.colorFilter = ColorMatrixColorFilter(
    floatArrayOf(
        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
        0.2126f, 0.7152f, 0.0722f, 0f, 0f,
        0f, 0f, 0f, 1f, 0f,
    )
)

R' = 0.2126R + 0.7152G + 0.0722B
G' = 0.2126R + 0.7152B + 0.0722G
B' = 0.2126R + 0.7152B + 0.0722G
A' = A

元画像	colorFilter指定

---

あくまで係数と定数だけなので複雑な計算はできませんが、ちょっとした加工をしての表示はできそうですね。特にディスエーブル表示でグレースケール表示したいなどは普通にあるユースケースかと思います。

以上です。