ブレンド モード

サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) グラフィックスを使用すると、グラフィカル オブジェクトに対してさまざまな合成操作を ICanvas.BlendMode プロパティで指定できます。 このプロパティは、グラフィカル オブジェクト (ソース と呼びます) が既存のグラフィカル オブジェクト (コピー先 と呼びます) の上にレンダリングされた場合の動作を決定します。

重要

ブレンド モードは、iOS と Mac Catalyst でのみ実装されます。 詳細については、こちらの GitHub の問題のページを参照してください。

既定では、最後に描画されたオブジェクトは、その下に描画されたオブジェクトを隠します。

この例では、最初にシアンの円を描画し、次にマゼンタ円、次に黄色の円を描画します。 各円は、その下に描画された円を隠します。 これは、既定のブレンド モードが Normal であり、ソースが 変換先の上に描画されることを意味します。 ただし、別のブレンド モードを指定して異なる結果を得ることもできます。 たとえば、ソースとコピー先が交差する領域で、DestinationOver を指定した場合、コピー先はソースの上に描画されます。

BlendMode リストの 28 個の要素は、次の 3 つのカテゴリに分けることができます。

分離可能	分離不可能	Porter-Duff
Normal	Hue	Clear
Multiply	Saturation	Copy
Screen	Color	SourceIn
Overlay	Luminosity	SourceOut
Darken		SourceAtop
Lighten		DestinationOver
ColorDodge		DestinationIn
ColorBurn		DestinationOut
SoftLight		DestinationAtop
HardLight		Xor
Difference		PlusDarker
Exclusion		PlusLighter

上の表に要素が表示される順序は、BlendMode リストの順序と同じです。 最初の列には 12 の 分離可能な ブレンド モードが一覧表示され、2 番目の列には 分離不可能な ブレンド モードが一覧表示されます。 最後に、3 列目の列に Porter-Duff ブレンド モードが一覧表示されます。

Porter-Duff ブレンド モード

Thomas Porter と Tom Duff にちなんだ Porter-Duff ブレンド モードでは、ソースとコピー先を合成した結果の色を計算する方法を記述した、12 個の合成演算子を定義します。 これらの合成演算子は、透明な領域を含む 2 つの四角形を描画する場合を考えると、最適に記述できます。

上の図では、コピー先は、表示面の左側と上の 3 分の 2 を占める茶色の領域を除き、透明な長方形です。 ソースも、表示面の右側と下の 3 分の 2 を占める青い領域を除き、透明な長方形です。 コピー先の上にソースを表示すると、次の結果が生成されます。

ソースの透明なピクセルを使用すると背景が透けて見え、青いソース ピクセルは背景を隠します。 これは、既定のブレンド モードである Normal を使用する通常のケースです。 ただし、ソースとターゲットが交差する領域で、DestinationOver のブレンド モードを使用して、ソースの代わりにコピー先が表示されるように指定できます。

DestinationIn ブレンド モードでは、コピー先とソースが交差する領域のみが表示され、コピー先の色が使用されます。

Xor ブレンド モードでは、次の 2 つの領域が重なる場所に何も表示されません。

色付きのコピー先とソースの四角形は、表示サーフェイスを 4 つの一意の領域に効果的に分割します。この領域は、コピー先とソースの四角形の存在に対応して、さまざまな方法で色付けできます。

コピー先とソースの両方がそれらの領域で透明であるため、右上と左下の四角形は常に空白になります。 コピー先の色は左上の領域を占めるので、その領域はコピー先の色で色分けするか、まったく色分けされません。 同様に、ソースの色は右下の領域を占めるので、その領域はソースの色で色分けすることも、まったく色分けできません。

次の表に、Microsoft.Maui.Graphics が提供するPorter-Duff ブレンド モードと、上の図の 3 つの空白以外の領域のそれぞれを色分けする方法を示します。

ブレンド モード	宛先	インターセクション	ソース
Clear
Copy		ソース	x
SourceIn		ソース
SourceOut			x
SourceAtop	x	ソース
DestinationOver	x	宛先	x
DestinationIn		宛先
DestinationOut	x
DestinationAtop		宛先	x
Xor	X		X
PlusDarker	x	SUM	x
PlusLighter	x	SUM	x

モードの名前付け規則は、いくつかの簡単な規則に従っています。

• Over サフィックスは、交差部分に表示される内容を示します。 ソースまたは宛先は、もう一方の上に描画されます。
• In サフィックスは、交差部分のみが色付けされていることを意味します。 出力は、他方にあるソースまたは宛先の部分のみに制限されます。
• Out サフィックスは、交差部分が色付けされていないことを意味します。 出力は、交差部分から外れているソースまたは宛先の部分のみです。
• Atop サフィックスは、In と Out の和集合です。これには、ソースまたは宛先が他方の上にある領域が含まれます。

Note

これらのブレンド モードは対称です。 ソースと宛先を交換でき、すべてのモードを引き続き使用できます。

PlusLighter ブレンド モードでは、ソースと宛先が合計されます。 次に、1 より上の値については、白が表示されます。 同様に、PlusDarker ブレンド モードはソースと宛先を合計しますが、結果の値から 1 を減算し、0 未満の値は黒になります。

分離可能なブレンド モード

分離可能なブレンド モードでは、グラフィカル オブジェクトの個々の赤、緑、青の色コンポーネントが変更されます。

次の表に、分離可能なブレンド モードを示し、その動作について簡単に説明します。 次の表で、Dc と Sc は宛先とソースの色を参照し、2 番目の列には変更が生じないソースの色が表示されます。

ブレンド モード	変更なし	操作
Normal		ブレンドなし、ソースが選択されています
Multiply	White	Sc-Dc を乗算して暗くします
Screen	Black	補数の積を補完します: Sc + Dc - Sc.Dc
Overlay	Gray	HardLight の逆関数
Darken	White	色の最小値: min(Sc, Dc)
Lighten	Black	色の最大値: max(Sc, Dc)
ColorDodge	Black	ソースに基づいて宛先を明るくします
ColorBurn	White	ソースに基づいて宛先を暗くします
SoftLight	Gray	ソフト スポットライトの効果に似ています
HardLight	Gray	強力なスポットライトの効果に似ています
Difference	Black	濃い色を明るい色から減算します: Abs(Dc - Sc)
Exclusion	Black	Difference と似ていますがコントラストは低い

Note

ソースが透明の場合、分離可能なブレンド モードは効果がありません。

次の例では、Multiply ブレンド モードを使用して、シアン、マゼンタ、黄色の 3 つの重複する円を描画します。

PointF center = new PointF(dirtyRect.Center.X, dirtyRect.Center.Y);
float radius = Math.Min(dirtyRect.Width, dirtyRect.Height) / 4;
float distance = 0.8f * radius;

PointF center1 = new PointF(distance * (float)Math.Cos(9 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(9 * Math.PI / 6) + center.Y);
PointF center2 = new PointF(distance * (float)Math.Cos(1 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(1 * Math.PI / 6) + center.Y);
PointF center3 = new PointF(distance * (float)Math.Cos(5 * Math.PI / 6) + center.X,
    distance * (float)Math.Sin(5 * Math.PI / 6) + center.Y);

canvas.BlendMode = BlendMode.Multiply;

canvas.FillColor = Colors.Cyan;
canvas.FillCircle(center1, radius);

canvas.FillColor = Colors.Magenta;
canvas.FillCircle(center2, radius);

canvas.FillColor = Colors.Yellow;
canvas.FillCircle(center3, radius);

その結果、2 つの色の組み合わせで赤、緑、青が生成され、3 つの色の組み合わせがすべて黒になります。

分離不可能なブレンド モード

分離不可能なブレンド モードでは、宛先とソースからの色相、彩度、および明度の値が結合されます。 これらのブレンド モードを理解するには、色相値-彩度値-輝度値 (HSL) カラー モデルを理解する必要があります。

• 色相値は、色の主波長を表します。 色相値の範囲は 0 ～ 360 で、加法と減算の原色を循環します。 赤は値 0、黄は 60、緑は 120、シアンは 180、青は 240、マゼンタは 300、一巡して 360 で赤に戻ります。 主要な色がない場合、たとえば色が白、黒、またはグレーの色合いである場合、色相は未定義であり、通常は 0 に設定されます。
• 彩度の値は色の純度を示し、0 ~ 100 の範囲で指定できます。 彩度の値が 100 の場合は最も純粋な色ですが、100 より小さい値を指定すると、色が灰色に変わります。 彩度の値が 0 の場合、グレーの色合いになります。
• 明度の値は、色の明るさを示します。 明度値 0 は、他の値に関係なく黒です。 同様に、明度値 100 は白です。

HSL 値 (0,100,50) は RGB 値 (255,0,0) であり、純粋な赤です。 HSL 値 (180,100,50) は RGB 値 (0,255,255) であり、純粋なシアンです。 彩度が低下すると、主要な色成分が減少し、他の成分が増加します。 彩度レベルが 0 の場合、すべてのコンポーネントは同じになり、色は灰色の色合いになります。

分離不可能なブレンド モードでは、概念的に次の手順を実行します。

1. ソース オブジェクトと宛先オブジェクトを元の色空間から HSL 色空間に変換します。
2. ソース オブジェクトと宛先 オブジェクトから、色相、彩度、明度コンポーネントの組み合わせから合成オブジェクトを作成します。
3. 結果を元の色空間に戻します。

次の表は、分離不可能なブレンド モードごとにどの HSL コンポーネントがどのように合成されるかを示しています。

ブレンド モード	ソース コンポーネント	変換先コンポーネント
Hue	Hue	彩度と明度
Saturation	[鮮やかさ]	色相と明度
Color	色相と彩度	明度
Luminosity	明度	色相と彩度