「SkiaSharpで日本語文字列を描画する」を編集中
ナビゲーションに移動
検索に移動
この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。
最新版 | 編集中の文章 | ||
1行目: | 1行目: | ||
− | + | '''Ascent'''とは、タイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。 | |
− | [[ | + | 下方向は[[Descent]]と呼ばれる。 |
− | + | [[ファイル:Typography Line Terms.png|none]] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Skiaをはじめとした多くの画像処理ライブラリで文字列を描画する場合、描画位置の指定はbaselineとなっており、 | |
+ | より正確に描画位置を把握するにはAscentからDescentまでが全体の高さを使うとよい。 | ||
<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> | ||
− | |||
− | |||
− | |||
[[category: SkiaSharp]] | [[category: SkiaSharp]] |