Skia Tips：流れる点線

範囲選択などのUIでよく見かける、流れる点線の実装方法を紹介します。

流れる点線の実装

SKPathEffect.CreateDash の第2引数に時間経過に応じたオフセット(ピクセル単位)を与えることで、点線が流れるように見せることができます。

using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 2,
    PathEffect = SKPathEffect.CreateDash( 
        new float[] { 5, 5 }, // 5ピクセルの線と5ピクセルの空白を繰り返す点線
        DateTime.Now.Millisecond / 1000.0f * 10 // オフセットを時間経過で変化させる (10ピクセル/秒)
    )
};
using var path = new SKPath();
path.MoveTo( 50, 150 );
path.LineTo( 100, 50 );
path.LineTo( 150, 150 );
path.LineTo( 200, 50 );
path.LineTo( 250, 150 );
canvas.DrawPath( path, paint );

これを毎フレーム描画することで、点線が流れるアニメーションを実現できます。

---

総合目次