Skia Tips：もつれあう線

よれてもつれあう、装飾的な線をSkiaで描画する方法について説明します。

もつれあう線の実装

これはパスエフェクトのちょっと複雑な組み合わせの応用です。
CreateDiscreteでランダムに折れた線を作成し、CreateCornerで角を丸め、CreateSumで複数のよれた線を束ねることで、もつれあう線を表現します。

// もつれあう線のペイント
using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 1.5f,
    // もつれあう線のPathEffect
    PathEffect = SKPathEffect.CreateSum(                // 束ねる
        SKPathEffect.CreateCompose(                     // よれた線３
            SKPathEffect.CreateCorner( 10 ),            // 角を丸める
            SKPathEffect.CreateDiscrete( 10, 5, 2 )     // ランダムに折る
        ),
        SKPathEffect.CreateSum(                         // 束ねる
            SKPathEffect.CreateCompose(                 // よれた線１
                SKPathEffect.CreateCorner( 10 ),        // 角を丸める
                SKPathEffect.CreateDiscrete( 10, 5, 0 ) // ランダムに折る
            ),
            SKPathEffect.CreateCompose(                 // よれた線２
                SKPathEffect.CreateCorner( 10 ),        // 角を丸める
                SKPathEffect.CreateDiscrete( 10, 5, 1 ) // ランダムに折る
            )
        )
    )
};
// 折れ線を描画
using var path = new SKPath();
path.MoveTo( 50, 50 );
path.LineTo( 117, 150 );
path.LineTo( 183, 50 );
path.LineTo( 250, 150 );
canvas.DrawPath( path, paint );

実行すると、以下のように、もつれあう３本の線が描画されます。

---

総合目次