Skiaの基本：キャンバスの基本

キャンバスとは

キャンバスは、Skiaで描画を行うための基本的なオブジェクトです。
図形、テキスト、画像などを描画するためのメソッドの他、座標変換やクリッピングなどの補助的な操作も提供しています。

描画については他の章で詳しく説明することにして、ここでは、補助的な操作に焦点を当てます。

座標変換

キャンバスは、描画する際の座標系を操作するためのメソッドを提供しています。これにより、描画する内容に回転、拡大縮小、平行移動などの変換を行うことができます。

クリッピング

クリッピングは、描画領域を制限するための操作です。キャンバスは、クリッピング領域を設定するためのメソッドを提供しています。これにより、特定の領域内にのみ描画を行うことができます。

状態の保存と復元

キャンバスは、座標変換やクリッピングなどの状態を保存し、後で復元するためのメソッドを提供しています。これにより、複雑な描画操作を効率的に行うことができます。

使用例

回る文字列

座標変換と状態の保存・復元を組み合わせて、中心を基準に回転しながら文字列を描画してみます。
通常、DrawText メソッドは、指定した座標に横一列にテキストを描画しますが、キャンバスの座標系を回転・拡大縮小することで、文字列を回転させたり、変形させたりすることができます。

// ペイントを作成
using var paint = new SKPaint {
    Color = SKColors.Black,
    IsAntialias = true,
};
// フォントを作成
using var font = new SKFont( SKTypeface.FromFamilyName( "Arial" ), 30 );
// 状態を保存
canvas.Save();
// 座標(150,150)に移動
canvas.Translate( 150, 150 );
for ( int i = 0 ; i < 360 ; i += 30 ) {
    // 状態を保存
    canvas.Save();
    // 回転
    canvas.RotateDegrees( i );
    // スケーリング(X方向0.75倍(縦長)に変形)
    canvas.Scale( 0.75f, 1.0f );
    // テキストを描画
    canvas.DrawText( "Skia!", 50, 0, font, paint );
    // 状態を復元
    canvas.Restore();
}
// 状態を復元
canvas.Restore();

実行すると、以下のように、中心を基準に回転しながら文字列が描画されます。

クリッピング

三角形のクリッピング領域を設定し、その中に画像を描画してみます。クリッピング領域の外側には描画されません。
実は、Skiaでは、一旦設定したクリッピング領域を解除するメソッドは提供されていません。そのため、クリッピング領域を設定する前の状態を保存し、描画後に復元することで、クリッピング領域を解除します。

// 状態を保存
canvas.Save();
// クリッピング設定
using var path = new SKPath();
path.MoveTo( 150, 20 );
path.LineTo( 250, 180 );
path.LineTo( 50, 180 );
path.Close();
canvas.ClipPath( path );
// 画像を描画
canvas.DrawImage( imageSrc, 0, 0 );
// 状態を復元
canvas.Restore();

実行すると、以下のように、三角形のクリッピング領域内にのみ画像が描画されます。

まとめ

キャンバスは、Skiaで描画を行うための基本的なオブジェクトであり、描画命令の受け取り、座標変換、クリッピング、状態の保存と復元などの機能を提供しています。これらの機能を活用することで、柔軟で効率的な描画操作が可能となります。

---

総合目次