Skiaの基本：イメージフィルタの基本

Skiaのイメージフィルタは、非常に強力な画像処理を提供します。
強力な代わり、難解なものが多いので、ここでは、よく使う基本的なものを紹介します。

ぼかし

描画する図形や画像をぼかすためのフィルタです。まずは、ペイントのImageFilterプロパティにぼかしフィルタを設定して、簡単な円を描画してみます。

using var paint = new SKPaint {
    Color = SKColors.BlueViolet,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
    ImageFilter = SKImageFilter.CreateBlur( 
        10, 10 // 水平方向と垂直方向のぼかし半径
    )
};
canvas.DrawCircle( 150, 100, 70, paint );

実行すると、以下のように、ぼやけた円が描画されます。

単純な図形だけでなく、画像もぼかすことができます。

canvas.DrawImage( imageCat, new SKRect( 75, 25, 200, 170 ), paint );

実行すると、以下のように、ぼやけた猫の画像が描画されます。

ドロップシャドウ

ドロップシャドウは、描画する図形や画像に影を追加するためのフィルタです。まずは、簡単な円にドロップシャドウを適用してみます。

using var paint = new SKPaint {
    Color = SKColors.BlueViolet,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
    ImageFilter = SKImageFilter.CreateDropShadow( 
        10, 10, // 影のオフセット
        5, 5,   // 影のぼかし半径
        SKColors.Black // 影の色
    )
};
canvas.DrawCircle( 150, 100, 70, paint );

実行すると、以下のように、影付きの円が描画されます。

同様に、画像にもドロップシャドウを適用できます。この場合、画像の不透明な部分に対して影が生成されます。

canvas.DrawImage( imageCat, new SKRect( 75, 25, 200, 170 ), paint );

実行すると、以下のように、影付きの猫の画像が描画されます。

影のオフセットをゼロ、影の色を明るい色に設定すると、グロー効果を得ることもできます。

ImageFilter = SKImageFilter.CreateDropShadow( 
    0, 0, // 影のオフセット
    5, 5, // ぼかし半径
    SKColors.White // 影の色 
)

実行すると、以下のように、グロー効果のある猫の画像が描画されます。

カラーフィルタ

カラーフィルタは、描画する図形や画像の色を変換するためのフィルタです。色の変換は、行列で指定します。

using var paint = new SKPaint {
    ImageFilter = SKImageFilter.CreateColorFilter(
        SKColorFilter.CreateColorMatrix( new float[] {
            // -----入力-----
            // R  G  B  A  1
               0, 1, 0, 0, 0, // R |
               1, 0, 0, 0, 0, // G 出
               0, 0, 1, 0, 0, // B 力
               0, 0, 0, 1, 0  // A |
        } )
    )
};
canvas.DrawImage( imageCat, new SKRect( 75, 25, 200, 170 ), paint );

実行すると、以下のように、赤と緑のチャンネルが入れ替わった、緑色の猫の画像が描画されます。

まとめ

Skiaのイメージフィルタを使用すると、描画する図形や画像に対して様々な効果を簡単に適用できます。ここでは、ぼかしとドロップシャドウの基本的な使い方を紹介しましたが、Skiaには他にも多くのイメージフィルタが用意されています。これらを組み合わせることで、より複雑で魅力的なビジュアルエフェクトを実現できます。ぜひ、他のフィルタも試してみてください。

---

総合目次