Skiaの実践：ブレンドモード

Skiaは、CSSで使用されるmix-blend-modeに対応する多くのブレンドモードをサポートしています。

ブレンドモードの設定方法

直接描画時に指定する方法

ペイントのBlendModeプロパティにブレンドモードを指定して描画します。

// まずは背景(Dst)を描画
canvas.DrawImage( imageDst, 0, 0 );

// 次にブレンドモードを指定して前景(Src)を描画
using var paint = new SKPaint() {
    BlendMode = SKBlendMode.Screen  // ブレンドモードを指定
};
canvas.DrawImage( imageSrc, 0, 0, paint );

描画レイヤーに指定する方法

描画レイヤーを作成して、そのレイヤーにブレンドモードを指定します。レイヤー内で行われた描画は、元のキャンバスに戻される際に指定されたブレンドモードで合成されます。

// まずは背景(Dst)を描画
canvas.DrawImage( imageDst, 0, 0 );

// ブレンドモードを指定して描画レイヤーを作成
using var paint = new SKPaint() {
    BlendMode = SKBlendMode.Screen  // ブレンドモードを指定
};
canvas.SaveLayer( paint );

// 前景(Src)を描画(ここではペイントは不要)
canvas.DrawImage( imageSrc, 0, 0 );

// 描画レイヤーを元に戻す
canvas.Restore();

イメージフィルターに指定する方法

イメージフィルターのCreateBlendModeメソッドでブレンドモードを指定してフィルターを作成し、二つのフィルターを合成します。
（簡単な例を思いつかいので、ここではコードは省略します。）

主なブレンドモードの紹介

あまりにも多いので、ここでは、アプリ上の描画処理で使いそうなものをピックアップして紹介します。

SrcOver

デフォルトのブレンドモードです。前景(Src)が背景(Dst)の上にそのまま描画されます。前景の透明度が考慮されます。

Screen

前景(Src)と背景(Dst)の色を反転し、乗算した後に再度反転します。というと難しいですが、結果的に前景が明るく合成されます。光を重ねたような表現に適しています。

Plus

前景(Src)と背景(Dst)の色を単純に加算します。Screenと似ていますが、より明るい効果が得られます。

SoftLight

背景(Dst)を暗くしたり明るくしたりする効果があります。前景(Src)の色に応じて、背景がソフトに変化します。

Overlay

SoftLightに似ていますが、よりコントラストの強い効果があります。

SrcIn

背景(Dst)のアルファ値を前景(Src)に適用します。背景の色は無視され、背景の形状で前景が切り抜かれたような効果があります。

DstIn

SrcInの逆順です。前景(Src)のアルファ値を背景(Dst)に適用します。前景の色は無視され、前景の形状で背景が切り抜かれたような効果があります。

---

総合目次