今度、Flutterの書籍を発売することになりました。いや、執筆することの大変さは噂で聞いていたけど、本当に辛かったです。その辺りの話は別に書くとして、ここでは、書籍に載せるには「需要が少なそう/カラーじゃないと意味がない」と思って書籍から外したBlendModeについて書きます。このBlendModeですが、公式ドキュメントにも詳しく書いてあるのですが、もっとシンプルにした方が伝わると思い書きました。
頑張って書いたので、宣伝しちゃいます。こちらです。12/25に発売予定です。
少しでも誰かの役に立つと嬉しいと思います。
では本題です。
概要
BlendModeは色と色の合成モードです。BlendModeの名前付けは、一部Porter-Duffの論文に対応しています。Porter-Duffに関しては、ネット検索すれば出てきますが、別に知らなくて良いです。
BlendModeはenumで、Flutterの様々なところで利用されるのですが、ImageウィジェットのcolorBlendModeプロパティで説明するとわかりやすいです。
この場合は、色と画像の合成です。
Image.asset(
'images/flutter.png',
color: Colors.green.withOpacity(0.5),
colorBlendMode: BlendMode.srcOver,
),
BlendMode.clear
これを指定すると画像もcolorも表示されません
BlendMode.src
colorだけが表示されます。
BlendMode.dst
画像だけが表示されます。
BlendMode.srcOver
colorを上に画像を下にして合成します。
BlendMode.dstOver
画像を上にcolorを下に合成します。
BlendMode.srcIn
colorと画像の重なっている部分だけ表示します。colorだけを表示します。
BlendMode.dstIn
colorと画像の重なっている部分だけ表示します。画像だけを表示します。
BlendMode.srcOut
colorと画像の重なっていない部分だけ表示します。colorだけを表示します。
BlendMode.dstOut
colorと画像の重なっていない部分だけ表示します。画像だけを表示します。
BlendMode.srcATop
colorと画像の重なっている部分だけ表示します。colorを上に画像を下に合成します。
BlendMode.dstATop
colorと画像の重なっている部分だけ表示します。画像を上にcolorを下に合成します。
BlendMode.xor
画像の色とcolorをxor演算します。
BlendMode.plus
画像の色とcolorをplus演算します。
BlendMode.modulate
画像とcolorの色成分を掛け合わせます。これは同じ色か暗い色にしかなりません。
BlendMode.screen
画像の色とcolorを反転させて、色成分を掛け合わせ、結果を反転させます。これは同じ色か明るい色にしかなりません。
BlendMode.overlay
画像の色の値が小さい場合はこれをcolorの値と乗算し、colorの値が小さい場合はcolorの値の反転と画像の色の値を反転させを乗算してから結果を反転します。
BlendMode.darken
各カラーチャンネルから最小値を選択して合成します。 colorを上に画像を下にして合成します。
BlendMode.lighten
各カラーチャンネルから最大値を選択して合成します。 colorを上に画像を下にして合成します。
BlendMode.colorDodge
画像の色を反転させたcolorで除算します。
- BlendMode.colorBurn
画像の色を反転させ、colorで除算し、結果を反転させます。
BlendMode.hardLight
colorの値が小さい場合は、これを画像の色の値と乗算します。画像の色の値が小さい場合は、画像の色の値を反転させ、colorの値を反転させて、それらを乗算して、結果を反転します。
BlendMode.softLight
colorが0.5より小さい場合はcolorDodgeを、大きい場合は、はcolorBurnを使用します。 これは、overlayと似ていますが柔らかい効果をもたらします。
BlendMode.difference
各チャンネルの大きい方の値から小さい方の値を引きます。 黒を合成しても効果はありません。白を合成すると、もう一方の画像の色が反転します。colorを上に画像を下にして合成します。 効果は、exclusionに近いが濃い色になります。
BlendMode.exclusion
2つの画像の合計から2つの画像の積を2倍して引きます。 黒を合成しても効果はありません。白を合成すると、もう一方の画像の色が反転します。colorを上に画像を下にして合成します。 効果は、differenceに近いが柔らかい色になります。
BlendMode.multiply
アルファチャンネルを含む、画像の色とcolorを乗算します。これは、同じ色またはより暗い色にしかなりません。アルファチャンネルも乗算されるので、透明なピクセルがあると結果も透明なピクセルになります。
BlendMode.hue
色相をcolor、彩度と明度を画像の色からとります。colorを上に画像を下にして合成します。
BlendMode.saturation
彩度をcolor、色相と明度を画像の色からとります。colorを上に画像を下にして合成します。color内で完全に透明な領域は、画像の色から彩度をとります。
BlendMode.color
色相と彩度をcolor、明度を画像の色からとります。colorを上に画像を下にして合成します。color内で完全に透明な領域は、画像の色から色相と彩度をとります。
BlendMode.luminosity
明度をcolor、色相と彩度は画像の色からとります。colorを上に画像を下にして合成します。color内で完全に透明な領域は、画像の色から明度をとります。
