Skiaの実践：折れ線や曲線

ここでは、SkiaSharpを使って折れ線や曲線を描画する方法について詳しく説明します。

折れ線の基本形

折れ線を描画するには、SKPathクラスでパスを作成し、DrawPathメソッドで描画します。

DrawPointsメソッドを使う方法を紹介している記事もありますが、DrawPathを使う方が柔軟で扱すく、綺麗な折れ線が描画できるので、こちらを推奨します。

using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 20,
};
// 折れ線のパスを作成
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 );

実行すると、以下のように、折れ線が描画されます。

角を落とす

折れ線の角を落とすには、SKPaintのStrokeJoinプロパティを設定します。

値	効果
SKStrokeJoin.Miter	角が尖る（デフォルト）
SKStrokeJoin.Bevel	角が斜めにカットされる
SKStrokeJoin.Round	角が丸くなる

ここでは、SKStrokeJoin.Roundを設定してみましょう。

paint.StrokeJoin = SKStrokeJoin.Round;

実行すると、以下のように、角が丸くなった折れ線が描画されます。

角をもっと丸くする

角をもっと丸くするには、PathEffectプロパティにSKPathEffect.CreateCornerを設定します。ただし、これは幾何学的、数学的に厳密な丸みを与えるものではなく、あくまで視覚的に丸く見せるための効果なので注意してください。

paint.PathEffect = SKPathEffect.CreateCorner( 30 );

実行すると、以下のように、さらに丸みを帯びた折れ線が描画されます。

曲線の描画

曲線を描画するには、３次ベジェ曲線を使う方法と、円錐曲線を使う方法があります。

３次ベジェ曲線

SKPathのCubicToメソッドで、３次ベジェ曲線の二つの制御点と終点を指定して描画します。

using var path = new SKPath();
path.MoveTo( 50, 100 );
path.CubicTo( 
    100, -50, // 第一制御点
    200, 250, // 第二制御点
    250, 100  // 終点
);
canvas.DrawPath( path, paint );

実行すると、以下のように、曲線が描画されます。

円錐曲線

SKPathのConicToメソッドで、一つの制御点と終点、そしてウェイトを指定して描画します。ウェイトは曲線の形状に影響を与える係数で、1.0に近いほど制御点に引き寄せられ、0.0に近いほど直線に近づきます。

using var path = new SKPath();
path.MoveTo( 50, 150 );
path.ConicTo( 
    200, -50, // 制御点
    250, 150, // 終点
    0.5f      // ウェイト
);
canvas.DrawPath( path, paint );

実行すると、以下のように、円錐曲線が描画されます。

---

総合目次