「SkiaSharpで日本語文字列を描画する」を編集中
ナビゲーションに移動
検索に移動
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
1行目: | 1行目: | ||
− | + | [[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。 | |
− | [[SkiaSharp]] | + | フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。 |
− | |||
− | |||
− | |||
− | |||
<source lang="csharp"> | <source lang="csharp"> | ||
− | var paint = new SKPaint(); | + | var paint = new SKPaint(); |
− | paint.Typeface = SKTypeface.FromFile( | + | paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf")); |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</source> | </source> | ||
− | + | SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は左上ではなくbaselineとなっており、より正確に描画時の「高さ」を算出するにはBaselineにAscentからDescentまでを加えた高さを使う。Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。下方向はDescentと呼ばれる。 | |
− | |||
− | |||
− | |||
[[ファイル:Typography Line Terms.png|none]] | [[ファイル:Typography Line Terms.png|none]] | ||
== 実装例 == | == 実装例 == | ||
<source lang="csharp"> | <source lang="csharp"> | ||
− | // まず描画先のキャンバスを作る | + | // まず描画先のキャンバスを作る |
− | SKBitmap bitmap = new SKBitmap(512, 512, isOpaque: false); | + | SKBitmap bitmap = new SKBitmap(512, 512, isOpaque: false); |
− | SKCanvas canvas = new SKCanvas(bitmap); | + | SKCanvas canvas = new SKCanvas(bitmap); |
− | // キャンバスを白く塗りつぶす | + | // キャンバスを白く塗りつぶす |
− | canvas.Clear(SKColors.White); | + | canvas.Clear(SKColors.White); |
− | var paint = new SKPaint(); | + | var paint = new SKPaint(); |
− | // フォントを明示的に設定する(日本語の描画時は必須) | + | // フォントを明示的に設定する(日本語の描画時は必須) |
− | paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf")); | + | paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf")); |
− | paint.TextSize = 64; | + | paint.TextSize = 64; |
− | paint.Color = SKColors.Red; | + | paint.Color = SKColors.Red; |
− | // 文字列を描画 | + | // 文字列を描画 |
− | // 描画位置の指定は「ベースライン」な点に注意すること | + | // 描画位置の指定は「ベースライン」な点に注意すること |
− | var text = "日本語"; | + | var text = "日本語"; |
− | var location = new SKPoint(100, 500); | + | var location = new SKPoint(100, 500); |
− | var width = paint.MeasureText("日本語"); | + | var width = paint.MeasureText("日本語"); |
− | // 文字列を描画 | + | // 文字列を描画 |
− | canvas.DrawText(text, location.X, location.Y, paint); | + | canvas.DrawText(text, location.X, location.Y, paint); |
− | // 文字列を囲う四角形を描画 | + | // 文字列を囲う四角形を描画 |
− | var rect = new SKRect( | + | var rect = new SKRect( |
− | + | location.X, | |
− | + | location.Y + paint.FontMetrics.Descent, | |
− | + | location.X + width, | |
− | + | location.Y + paint.FontMetrics.Ascent | |
− | ); | + | ); |
− | paint.Style = SKPaintStyle.Stroke; | + | paint.Style = SKPaintStyle.Stroke; |
− | paint.StrokeWidth = 1; | + | paint.StrokeWidth = 1; |
− | canvas.DrawRect(rect, paint); | + | canvas.DrawRect(rect, paint); |
− | canvas.Flush(); | + | canvas.Flush(); |
− | // おまけ:キャンバスをファイルに保存 | + | // おまけ:キャンバスをファイルに保存 |
− | using (var image = SKImage.FromBitmap(bitmap)) | + | using (var image = SKImage.FromBitmap(bitmap)) |
− | using (var file = File.Create("/tmp/test.png")) | + | using (var file = File.Create("/tmp/test.png")) |
− | { | + | { |
− | + | var data = image.Encode(SKEncodedImageFormat.Png, 100); | |
− | + | data.SaveTo(file); | |
− | } | + | } |
</source> | </source> | ||