Skia Tips：縁取りエフェクト

イメージフィルタを応用して、縁取（光彩）りエフェクトを実現する方法を紹介します。

最軽量版

Skiaのドロップシャドウフィルタは、指定したオフセットとぼかしを持つドロップシャドウを描画するためのイメージフィルタです。このフィルタを利用して、縁取りエフェクトを作成することができます。

using var paint = new SKPaint {
    Color = SKColors.BlueViolet,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
    ImageFilter = SKImageFilter.CreateDropShadow( 
        0, 0,   // オフセットをゼロに設定
        8, 8,   // ぼかし半径を大きめに設定
        SKColors.White // 縁取りの色
    )
};
canvas.DrawCircle( 150, 100, 70, paint );

実行すると、以下のように、白い縁取りで囲まれた円が描画されます。ただ、縁取りの濃さはぼかしの影響を受けるため、あまり濃くはなりません。

濃い縁取り版

ドロップシャドウフィルタを二重にネストすることで、縁取りの濃さを増強することも可能です。濃さを自由に設定することはできませんが、シンプルに実装できます。

using var paint = new SKPaint {
    Color = SKColors.BlueViolet,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
    ImageFilter = SKImageFilter.CreateDropShadow( // １段目
        0, 0, 
        10, 10, 
        SKColors.White,
        SKImageFilter.CreateDropShadow( // ２段目
            0, 0,
            10, 10,
            SKColors.White
        )
    )
};
canvas.DrawCircle( 150, 100, 70, paint );

実行すると、以下のように、より濃い白い縁取りで囲まれた円が描画されます。

完全版

より自由に縁取りの幅や濃さを調整することのできる、完全版の実装例を示します。この方法では、元図形を膨張し、ぼかして、アルファ値を抽出し、指定色で合成する一連のイメージフィルタを組み合わせています。具体的なフィルタの構成は以下の通りです。

• ブレンド合成(SKImageFilter.CreateBlendMode(SrcOver))
  • ブレンドのDst側
    • カラーフィルター(SKImageFilter.CreateColorFilter)
      • カラーマトリックスフィルター(アルファ値抽出＋着色)
      • ぼかしフィルター(SKImageFilter.CreateBlur)
        • 膨張フィルター(SKImageFilter.CreateDilate)
  • ブレンドのSrc側(元の描画)

SKColor glowColor = SKColors.White;
using var paint = new SKPaint() {
    Color = SKColors.BlueViolet,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
    ImageFilter = SKImageFilter.CreateBlendMode(
        // ブレンドモードSrcOverで合成
        SKBlendMode.SrcOver,
        // ブレンドのDst側
        SKImageFilter.CreateColorFilter(
            // アルファ値を抽出して色を付けるカラーフィルター
            SKColorFilter.CreateColorMatrix( new float[] {
                0, 0, 0, 0, glowColor.Red / 255f,
                0, 0, 0, 0, glowColor.Green / 255f,
                0, 0, 0, 0, glowColor.Blue / 255f,
                0, 0, 0, 1, 0
            } ),
            // ぼかしフィルター
            SKImageFilter.CreateBlur(
                3, 3,
                // 膨張フィルター
                SKImageFilter.CreateDilate( 5, 5 )
            )
        )
        // ブレンドのSrc側は省略(元の描画)
    )
};
canvas.DrawCircle( 150, 100, 70, paint );

実行すると、以下のように、更に濃い白い縁取りで囲まれた円が描画されます。縁取りの幅や濃さを自由に調整できる点が特徴です。

---

総合目次