Skiaの基本：描画の基本

よく使う基本的な図形の描画を、実際に試しながら見てみましょう。

塗り潰す

キャンバス全体を特定の色で塗り潰すには、Clearメソッドを使います。

canvas.Clear( SKColors.BlueViolet );

実行すると、キャンバス全体が指定した色で塗りつぶされます。

直線

直線を描画するには、DrawLineメソッドを使います。

以降のサンプルではペイントの作成部分は省略します。

using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true,
    Style = SKPaintStyle.Stroke,
    StrokeWidth = 10
};
canvas.DrawLine( 50, 20, 250, 180, paint );

実行すると、以下のように、ペイントで指定した色と線幅で直線が描画されます。

四角形

四角形を描画するには、DrawRectメソッドを使います。

canvas.DrawRect( 50, 20, 200, 160, paint );

実行すると、以下のように、四角形が描画されます。
「ペイントの基本」の章でも触れましたが、Skiaには「塗りつぶした四角形を描画する」といったメソッドは存在しません。塗りつぶしなどはペイントに設定します。

丸角四角形

角の丸い四角形を描画するには、DrawRoundRectメソッドを使います。

canvas.DrawRoundRect( new SKRect( 50, 20, 250, 180 ), 30, 30, paint );

実行すると、以下のように、丸角四角形が描画されます

円

円を描画するには、DrawCircleメソッドを使います。

canvas.DrawCircle( 150, 100, 80, paint );

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

楕円

楕円を描画するには、DrawOvalメソッドを使います。このメソッドには、外接する四角形を指定する方法と、中心座標と縦横の半径を指定する方法の、２種類のオーバーロードがあります。用途に合わせて便利な方を使いましょう。

canvas.DrawOval( new SKRect( 70, 30, 230, 170 ), paint );

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

円弧/扇型

円弧を描画するには、DrawArcメソッドを使います。中心点と結ぶ直線を含む扇型と、中心点と結ばれない円弧の両方に対応しています。

canvas.DrawArc( new SKRect( 70, 30, 230, 170 ), 0, 120, true, paint );

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

折れ線

折れ線を描画するには、パスとDrawPathメソッドを使います。

SKPathはアンマネージドリソースです。

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 );

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

多角形を描画する

多角形を描画するには、パスとDrawPathメソッドを使います。折れ線の場合とほぼ同じですが、パスの最後をCloseメソッドで閉じます。

using var path = new SKPath();
path.MoveTo( 50, 150 );
path.LineTo( 100, 50 );
path.LineTo( 150, 100 );
path.LineTo( 200, 50 );
path.LineTo( 250, 150 );
path.Close();
canvas.DrawPath( path, paint );

実行すると、以下のように、閉じた多角形が描画されます。

文字列

文字列を描画するには、ペイントのほかにフォント情報(SKFont)を指定して、DrawTextメソッドを使います。

古い解説記事などではペイントにフォント情報を設定している例がありますが、現在はフォント関係は独立したクラスで扱います。

using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true
};
using var font = new SKFont( SKTypeface.FromFamilyName( "Arial" ), 100 );
canvas.DrawText( "Skia", 50, 140, font, paint );

実行すると、以下のように、文字列が描画されます。

画像

画像を描画するには、DrawImageメソッドを使います。ここでは、あらかじめ用意しておいたPNG画像を読み込んで描画してみます。

using var image = SKImage.FromEncodedData( "cat.png" );
canvas.DrawImage( image, new SKRect( 75, 25, 200, 170 ) );

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

---

総合目次