メインメニューを開く

「SkiaSharpで日本語文字列を描画する」を編集中

警告: ログインしていません。編集を行うと、あなたの IP アドレスが公開されます。ログインまたはアカウントを作成すれば、あなたの編集はその利用者名とともに表示されるほか、その他の利点もあります。

この編集を取り消せます。 下記の差分を確認して、本当に取り消していいか検証してください。よろしければ変更を保存して取り消しを完了してください。

最新版 編集中の文章
1行目: 1行目:
== 注意点:フォントを明示的に指定すること ==
+
'''Ascent'''とは、タイポグラフィ用語のひとつで、アルファベット大文字の高さ(Cap Height)に加え、文字の「跳ね」を考慮した高さのことである。
[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある(SKPaintのTypeface プロパティを明示的に設定しておく必要がある)。
+
下方向は[[Descent]]と呼ばれる。
  
ちなみにSkiaのフォント関連クラスの名称は「Font云々」ではなく「SKTypeface云々」なのでインテリセンスで出てこなくて探すのに一苦労するかもしれない。
+
[[ファイル:Typography Line Terms.png|none]]
 
 
以下は[[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">
 
<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.X,  
    location.Y + paint.FontMetrics.Descent,  
+
                location.Y + paint.FontMetrics.Descent,  
    location.X + width,  
+
                location.X + width,  
    location.Y + paint.FontMetrics.Ascent
+
                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);
+
                var data = image.Encode(SKEncodedImageFormat.Png, 100);
    data.SaveTo(file);
+
                data.SaveTo(file);
}
+
            }
 
</source>
 
</source>
 
== 関連項目 ==
 
* [[MonoGameでSkiaSharpを使う]]
 
  
 
[[category: SkiaSharp]]
 
[[category: SkiaSharp]]

MonoBookへの投稿はすべて、他の投稿者によって編集、変更、除去される場合があります。 自分が書いたものが他の人に容赦なく編集されるのを望まない場合は、ここに投稿しないでください。
また、投稿するのは、自分で書いたものか、パブリック ドメインまたはそれに類するフリーな資料からの複製であることを約束してください(詳細はMonoBook:著作権を参照)。 著作権保護されている作品は、許諾なしに投稿しないでください!

このページを編集するには、下記の確認用の質問に回答してください (詳細):

取り消し 編集の仕方 (新しいウィンドウで開きます)