Skia Tips：水が流れるパイプ

これは、とあるコミュニティサイトで見かけたお題です。

「線にグラデーションをつけて、水が流れるパイプを描きたい。どうすればいい？」

質問者はGDI+を使いたかったようですが、ここでは、SkiaSharpを使って、水が流れるパイプを描く方法を紹介します。

水が流れるパイプの実装

別の章で紹介した、流れる点線の応用です。色を変えながら、点線のオフセットを変化させていきます。

副次的に、StrokeCapをButtに設定することで、パイプの太さよりも短い線分が描画されるようにします。また、点線の線分の長さをわずかに長くすることで、線分同士の隙間ができないようにします。

鋭角に曲げると少々不自然に見えることがありますが、緩やかなカーブであれば、なかなか良い感じになります。

using var path = new SKPath();
path.MoveTo( 50, 50 );
// 三次ベジェ曲線でパスを作成
path.CubicTo( 150, 0, 150, 200, 250, 150 );

for ( int i = 0 ; i < 5 ; i++ ) {
    // 彩度を変化させながら点線を描画
    using var paint = new SKPaint {
        // 色相200、彩度30～100、明度100の色
        Color = SKColor.FromHsv( 200, 30 + 70 * i / 4, 100 ),
        // アンチエイリアスを有効にする
        IsAntialias = true,
        // 塗りつぶしではなく線を描画
        Style = SKPaintStyle.Stroke,
        // 線の太さ(20px)
        StrokeWidth = 20,
        // 線端の形状(Butt)
        StrokeCap = SKStrokeCap.Butt,
        // パスエフェクトで点線を指定
        PathEffect = SKPathEffect.CreateDash( 
            // 線分6px、隙間19px
            new float[] { 6, 19 }, 
            // オフセットを時間とiで変化させる
            DateTime.Now.Millisecond / 1000.0f * 25 - i * 5 
        )
    };
    canvas.DrawPath( path, paint );
}

これを毎フレーム描画することで、パイプの中を水が流れるアニメーションを実現できます。

---

総合目次