SkiaSharp のブレンド モード
これらの記事では、SKPaint の BlendMode プロパティに焦点を当てます。 BlendMode プロパティは、29 個のメンバーを持つ SKBlendMode 列挙型です。
BlendMode プロパティは、グラフィカル オブジェクト (多くの場合、"ソース" と呼ばれます) が既存のグラフィカル オブジェクト ("ターゲット" と呼ばれます) の上にレンダリングされるときの動作を決定します。 通常は、新しいグラフィカル オブジェクトによってその下のオブジェクトが隠されるものと思われます。 しかし、そのようになるのは、既定のブレンド モードが SKBlendMode.SrcOver であるためだけです。つまり、ソースがターゲットの "上に" 描画されます。 SKBlendMode の他の 28 メンバーでは、これとは異なる効果が生まれます。 グラフィックス プログラミングでは、さまざまな方法でグラフィカル オブジェクトを組み合わせる手法を "合成" と呼びます。
SKBlendModes 列挙型
SkiaSharp のブレンド モードは、W3C の「合成およびブレンド レベル 1」仕様で説明されているものに密接に対応しています。 Skia の「SkBlendMode の概要」でも、役に立つ背景情報が提供されています。 ブレンド モードの一般的な概要については、Wikipedia の記事「ブレンド モード」を参照することをお勧めします。 ブレンド モードは Adobe Photoshop でサポートされているため、そのコンテキストでのブレンド モードに関して、他にも多くのオンライン情報があります。
SKBlendMode 列挙型の 29 個のメンバーは、3 つのカテゴリに分けることができます。
| Porter-Duff | 分離可能 | 分離不可能 |
|---|---|---|
Clear |
Modulate |
Hue |
Src |
Screen |
Saturation |
Dst |
Overlay |
Color |
SrcOver |
Darken |
Luminosity |
DstOver |
Lighten |
|
SrcIn |
ColorDodge |
|
DstIn |
ColorBurn |
|
SrcOut |
HardLight |
|
DstOut |
SoftLight |
|
SrcATop |
Difference |
|
DstATop |
Exclusion |
|
Xor |
Multiply |
|
Plus |
これら 3 つのカテゴリの名前の意味については、後で詳しく説明します。 この一覧でのメンバーの順序は、SKBlendMode 列挙型の定義と同じです。 1 列目の 13 個の列挙メンバーの整数値は 0 から 12 です。 2 列目は整数 13 から 24 に対応する列挙メンバーで、3 列目のメンバーの値は 25 から 28 です。
これらのブレンド モードは、W3C の「合成およびブレンド レベル 1」ドキュメントでも "ほぼ" 同じ順序で説明されていますが、いくつか違いがあります。Src モードは W3C のドキュメントでは Copy という名前になっており、Plus は Lighter という名前です。 W3C のドキュメントで定義されている Normal ブレンド モードは、SrcOver と同じであるため SKBlendModes には含まれません。 (2 列目の先頭にある) Modulate ブレンド モードは、W3C のドキュメントには含まれていません。Multiply モードの説明は、Screen の前にあります。
Modulate ブレンド モードは Skia に固有であるため、追加の Porter-Duff モードおよび分離可能モードとして説明されています。
透明度の重要性
歴史的に、合成は "アルファ チャネル" の概念と組み合わせて開発されました。 SKCanvas オブジェクトやフルカラー ビットマップなどの表示サーフェスでは、各ピクセルは 4 バイトで構成されます。赤、緑、青の成分に 1 バイトずつと、透明度のための追加のバイトです。 このアルファ成分は、完全に透明の場合は 0、完全に不透明の場合は 0xFF で、それらの間の値は異なる透明度レベルを表します。
ブレンド モードの多くは透明度に依存します。 通常、SKCanvas が PaintSurface ハンドラーで最初に取得されるとき、またはビットマップ上に描画するために SKCanvas が作成されるときの最初のステップは、次の呼び出しです。
canvas.Clear();
このメソッドは、キャンバスのすべてのピクセルを、new SKColor(0, 0, 0, 0) または整数 0x00000000 に相当する、透明な黒のピクセルに置き換えます。 すべてのピクセルのすべてのバイトが 0 に初期化されます。
PaintSurface ハンドラーで取得される SKCanvas の描画サーフェイスは白い背景を持つように見えますが、それは、SKCanvasView 自体が透明な背景を持ち、ページの背景が白いためでしかありません。 SKCanvasView の Xamarin.FormsBackgroundColor プロパティを Xamarin.Forms 色に設定することで、この事実を確認できます。
canvasView.BackgroundColor = Color.Red;
または、ContentPage から派生するクラスで、ページの背景色を設定できます。
BackgroundColor = Color.Red;
SkiaSharp キャンバス自体は透明であるため、SkiaSharp グラフィックスの背後にこの赤い背景が表示されます。
記事「SkiaSharp の透明度」では、透明度を使って合成画像内に複数のグラフィックスを配置するいくつかの基本的な手法を説明しました。 ブレンド モードはそれより高度ですが、透明度はブレンド モードでもやはり重要です。
SkiaSharp の Porter-Duff ブレンド モード
ソースとターゲットの画像に基づいてシーンを合成するには、Porter-Duff ブレンド モードを使います。
SkiaSharp の分離可能ブレンド モード
赤、緑、青の色を変更するには、分離可能ブレンド モードを使います。
SkiaSharp の分離不可能ブレンド モード
色相、彩度、または明度を変更するには、分離不可能ブレンド モードを使います。