Skiaの基本：テキスト描画の基本

ここでは、テキストを描画する基本的な方法と、Skiaでテキストを扱う際の重要なポイントについて説明します。

テキスト描画の基本

まず最初の基本です。色などを設定したペイント(SKPaint)と、フォント情報を持つフォント(SKFont)を用意し、CanvasのDrawTextメソッドでテキストを描画します。

// テキストのためのペイント
using var paint = new SKPaint {
    IsAntialias = true,
    Color = SKColors.Black
};
// フォントを作成
using var typeface = SKTypeface.FromFamilyName( "Arial" );
using var font = new SKFont( typeface, 100 );
// テキストを描画
canvas.DrawText( "Skia", 20, 140, font, paint );

実行すると、以下のように表示されます。

フォントのあれこれ

フォントにいくつかのプロパティを設定することで、テキストの見た目を変えることができます。

// テキストのためのペイント
using var typeface = SKTypeface.FromFamilyName( "Arial" );
using var font = new SKFont( typeface, 100 ) {
    SkewX = -0.25f, // イタリック風に傾ける
    ScaleX = 1.2f,  // 横方向に拡大
};

実行すると、以下のように、傾いて横に広がったテキストが表示されます。

カスタムフォントの使用

OSにインストールされていないフォントを使用したい場合、フォントファイルを直接読み込むことができます。

これは非常に高コストな操作です。可能な限り同じフォントオブジェクトを使い回すようにしてください。

using var typeface = SKTypeface.FromFile( @"fonts\PixelMplus10-Regular.ttf" );
using var font = new SKFont( typeface, 100 );

実行すると、以下のようにカスタムフォントでテキストが表示されます。

テキストの座標

DrawTextメソッドで指定する座標は、デフォルトでは、テキストのベースラインの左端の位置を表します。ベースラインとは、文字が並んだときに揃う基準線のことで、たいていの場合は左下隅、ですが、フォントによっては、ベースラインより上や下に文字がはみ出すことがあるので注意が必要です。

SKTextAlignを指定して、テキストの配置を変更することもできます。例えば、以下のように指定すると、テキストのベースラインの中央に配置されます。

canvas.DrawText( "Skia", 150, 140, SKTextAlign.Center, font, paint );

テキストの寸法

フォントのサイズの単位はピクセルです。
例えば、フォントのSizeプロパティを100に設定すると、フォントの「EMボックス」の高さが100ピクセルになります。EMボックスは、フォントの設計上の基準となる矩形ですが、実際に描画される文字の高さはフォントによって異なり、想定外の高さになるフォントもあります。

フォントの寸法を取得するには、Metricsプロパティを使用します。また、特定の文字列の幅や高さを取得するには、SKFont.MeasureTextメソッドを使用します。

取得できる主な値と実際の描画の例は、以下のようになります。

縦、横、斜め

Skiaでは、テキストを縦書きにしたり、斜めに配置したりすることも可能です。これには、キャンバスの座標変換を使用します。
詳しくは、「Skiaの基本：キャンバスの基本操作」の章をご覧ください。

まとめ

ここでは、Skiaでのテキスト描画の基本について説明しました。思い通りにテキストを描画するためには、フォントの各部の寸法や、座標系の理解が重要です。

---

総合目次