メインメニューを開く

差分

SkiaSharpで日本語文字列を描画する

745 バイト追加, 2020年9月9日 (水) 08:02
'''Ascent'''とは、タイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。== 注意点:フォントを明示的に指定すること ==下方向は[[DescentSkiaSharp]]と呼ばれる。で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある(SKPaintのTypeface プロパティを明示的に設定しておく必要がある)。
ちなみにSkiaのフォント関連クラスの名称は「Font云々」ではなく「SKTypeface云々」なのでインテリセンスで出てこなくて探すのに一苦労するかもしれない。
 
以下は[[Xamarin.Mac]]でアプリ内に埋め込んだ[[IPAフォント]]を指定する例。
<source lang="csharp">
var paint = new SKPaint();
paint.Typeface = SKTypeface.FromFile(
Path.Combine(
NSBundle.MainBundle.BundlePath,
"Contents",
"Resources",
"ipag.ttf"));
 
</source>
 
== 注意点:描画位置の指定はベースライン ==
SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は[[コンピューターグラフィックス]]の世界で一般的な「左上」ではなく「X座標は左端、Y座標はbaseline」となっている。
 
描画時の「高さ」を正確に算出するにはBaselineにAscentからDescentまでを加えた高さを使う。Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。下方向はDescentと呼ばれる。
[[ファイル:Typography Line Terms.png|none]]
 Skiaをはじめとした多くの画像処理ライブラリで文字列を描画する場合、描画位置の指定はbaselineとなっており、より正確に描画位置を把握するにはAscentからDescentまでが全体の高さを使うとよい。== 実装例 ==
<source lang="csharp">
// まず描画先のキャンバスを作るSKBitmap bitmap = new SKBitmap(512, 512, isOpaque: false); SKCanvas canvas = new SKCanvas(bitmap);
// 白く塗りつぶすキャンバスを白く塗りつぶす canvas.Clear(SKColors.White);
var paint = new SKPaint(); // フォントを設定する(日本語の描画時は必須)フォントを明示的に設定する(日本語の描画時は必須) paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf")); paint.TextSize = 64; paint.Color = SKColors.Red;
// 文字列を描画 // 描画位置の指定は「ベースライン」な点に注意描画位置の指定は「ベースライン」な点に注意すること var text = "日本語"; var location = new SKPoint(100, 500); var width = paint.MeasureText("日本語");
// 文字列を描画 canvas.DrawText(text, location.X, location.Y, paint);
// 文字列を囲う四角形を描画 var rect = new SKRect( location.X, location.Y + paint.FontMetrics.Descent, location.X + width, location.Y + paint.FontMetrics.Ascent ); paint.Style = SKPaintStyle.Stroke; paint.StrokeWidth = 1; canvas.DrawRect(rect, paint);
canvas.Flush();
// ファイルに保存おまけ:キャンバスをファイルに保存 using (var image = SKImage.FromBitmap(bitmap)) using (var file = File.Create("/tmp/test.png")) { var data = image.Encode(SKEncodedImageFormat.Png, 100); data.SaveTo(file); }
</source>
 
== 関連項目 ==
* [[MonoGameでSkiaSharpを使う]]
[[category: SkiaSharp]]