Skia Tips：輪郭のぼやけた画像

輪郭をシャープに切り抜いた画像は、クリッピングを使って簡単に描画できますが、輪郭をぼかすにはどうしたらよいでしょうか？ちょっと試してみましょう。

輪郭のぼやけた画像の実装

これは少し複雑なイメージフィルタの応用です。表示する元画像を、ぼかした図形のアルファで切り抜いて描画します。具体的なフィルタの構成は以下の通りです。

• 重なり部分(SKImageFilter.CreateBlendMode(SrcIn))
  • ぼかした図形(SKImageFilter.CreateBlur)
  • 変形(SKImageFilter.CreateMatrix)
    • 画像(SKImageFilter.CreateImage)

using var paint = new SKPaint { 
    Style = SKPaintStyle.Fill,
    Color = SKColors.White,
    IsAntialias = true,
    ImageFilter = SKImageFilter.CreateBlendMode(
        // ブレンドモード(destにsrcのアルファを適用)
        SKBlendMode.SrcIn,
        // dest: ぼかしフィルター(ぼかした図形)
        SKImageFilter.CreateBlur( 5, 5 ),
        // src: 変形した元画像(猫)
        SKImageFilter.CreateMatrix(
            // 変形行列
            new SKMatrix {
                TransX = 20,   // 横方向の移動量
                ScaleX = 0.6f, // 横方向の拡大率
                SkewX = 0.0f,  // 横方向の傾き
                TransY = -10,  // 縦方向の移動量
                ScaleY = 0.6f, // 縦方向の拡大率
                SkewY = 0.0f,  // 縦方向の傾き
                Persp0 = 0,    // 透視変換パラメータ
                Persp1 = 0,
                Persp2 = 1
            },
            // 補間オプション
            SKSamplingOptions.Default,
            // 元画像(猫)
            SKImageFilter.CreateImage( imageNeko )
        )
    )
};
// 輪郭のぼやけた円を描画
canvas.DrawCircle( 150, 100, 60, paint );

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

まとめ

ちょっと複雑なイメージフィルタの組み合わせの例でした。イメージフィルタは組み合わせることで様々な効果を実現できます。ぜひいろいろ挑戦してみてください。

---

総合目次