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

← 古い編集

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
-SkiaSharpで日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。
+== 注意点：フォントを明示的に指定すること ==
-フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。
+[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。
-以下はXamarin.Macでの例。
+ちなみにSkiaのフォント関連クラスの名称は「Font云々」ではなく「SKTypeface云々」なのでインテリセンスで出てこなくて探すのに一苦労するかもしれない。
+以下は[[Xamarin.Mac]]でアプリ内に埋め込んだ[[IPAフォント]]を指定する例。
 <source lang="csharp">
-            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"));
 </source>
-SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は左上ではなくbaselineとなっており、
+== 注意点：描画位置の指定はベースライン ==
-より正確に描画時の「高さ」を算出するにはBaselineにAscentからDescentまでを加えた高さを使う。
+SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は[[コンピューターグラフィックス]]の世界で一般的な「左上」ではなく「X座標は左端、Y座標はbaseline」となっている。
-Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ（Cap Height）に加え、文字の「跳ね」を考慮した高さのことである。
-下方向はDescentと呼ばれる。
+描画時の「高さ」を正確に算出するにはBaselineにAscentからDescentまでを加えた高さを使う。Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ（Cap Height）に加え、文字の「跳ね」を考慮した高さのことである。下方向はDescentと呼ばれる。
 [[ファイル:Typography Line Terms.png|none]]
 == 実装例 ==
 <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>