「SkiaSharpで日本語文字列を描画する」の版間の差分

提供: MonoBook
ナビゲーションに移動 検索に移動
imported>Administrator
(Administrator がページ「Ascent」を「SkiaSharpで日本語文字列を描画する」に移動しました)
imported>Administrator
1行目: 1行目:
'''Ascent'''とは、タイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。
+
SkiaSharpで日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。
下方向は[[Descent]]と呼ばれる。
+
フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。
 +
以下はXamarin.Macでの例。
 +
<source lang="csharp">
 +
            var paint = new SKPaint();
 +
            paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf"));
 +
</source>
  
 +
SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は左上ではなくbaselineとなっており、
 +
より正確に描画時の「高さ」を算出するにはBaselineにAscentからDescentまでを加えた高さを使う。
 +
Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。
 +
下方向はDescentと呼ばれる。
 
[[ファイル:Typography Line Terms.png|none]]
 
[[ファイル: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);
50行目: 57行目:
 
             }
 
             }
 
</source>
 
</source>
 +
 +
== 関連項目 ==
 +
* [[MonoGameでSkiaSharpを使う]]
  
 
[[category: SkiaSharp]]
 
[[category: SkiaSharp]]

2017年11月16日 (木) 15:28時点における版

SkiaSharpで日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。 フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。 以下はXamarin.Macでの例。

            var paint = new SKPaint();
            paint.Typeface = SKTypeface.FromFile(Path.Combine(NSBundle.MainBundle.BundlePath, "Contents", "Resources", "ipag.ttf"));

SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は左上ではなくbaselineとなっており、 より正確に描画時の「高さ」を算出するにはBaselineにAscentからDescentまでを加えた高さを使う。 Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。 下方向はDescentと呼ばれる。

Typography Line Terms.png

実装例

            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);
            }

関連項目