SkiaSharpで日本語文字列を描画する - 版の履歴

Administrator: /* 注意点：描画位置の指定はベースライン */

2020-09-09T08:02:17Z

注意点：描画位置の指定はベースライン

← 古い版		2020年9月9日 (水) 08:02時点における版
17行目:		17行目:

	== 注意点：描画位置の指定はベースライン ==		== 注意点：描画位置の指定はベースライン ==
	SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は左上ではなくbaselineとなっており、より正確に描画時の「高さ」を算出するにはBaselineにAscentからDescentまでを加えた高さを使う。Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ（Cap Height）に加え、文字の「跳ね」を考慮した高さのことである。下方向はDescentと呼ばれる。		SkiaSharpで文字列を描画する場合の注意点としては、描画位置の指定は[[コンピューターグラフィックス]]の世界で一般的な「左上」ではなく「X座標は左端、Y座標はbaseline」となっている。

			描画時の「高さ」を正確に算出するにはBaselineにAscentからDescentまでを加えた高さを使う。Ascentとはタイポグラフィ用語のひとつで、アルファベット大文字の高さ（Cap Height）に加え、文字の「跳ね」を考慮した高さのことである。下方向はDescentと呼ばれる。
	[[ファイル:Typography Line Terms.png\|none]]		[[ファイル:Typography Line Terms.png\|none]]

Administrator: /* 注意点：フォントを明示的に指定すること */

2020-06-29T07:25:02Z

注意点：フォントを明示的に指定すること

← 古い版		2020年6月29日 (月) 07:25時点における版
1行目:		1行目:
	== 注意点：フォントを明示的に指定すること ==		== 注意点：フォントを明示的に指定すること ==
	[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。
	~~フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。~~
			ちなみにSkiaのフォント関連クラスの名称は「Font云々」ではなく「SKTypeface云々」なのでインテリセンスで出てこなくて探すのに一苦労するかもしれない。

	以下は[[Xamarin.Mac]]でアプリ内に埋め込んだ[[IPAフォント]]を指定する例。		以下は[[Xamarin.Mac]]でアプリ内に埋め込んだ[[IPAフォント]]を指定する例。

2020年6月29日 (月) 07:23にAdministratorによる

2020-06-29T07:23:26Z

← 古い版		2020年6月29日 (月) 07:23時点における版
1行目:		1行目:
			== 注意点：フォントを明示的に指定すること ==
	[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。
	フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。
14行目:		15行目:
	</source>		</source>

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

2020年6月29日 (月) 07:22にAdministratorによる

2020-06-29T07:22:21Z

← 古い版		2020年6月29日 (月) 07:22時点における版
1行目:		1行目:
	[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。
	~~フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は~~[[Xamarin.Mac]]~~での例。~~		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。

			以下は[[Xamarin.Mac]]でアプリ内に埋め込んだ[[IPAフォント]]を指定する例。
	<source lang="csharp">		<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>		</source>

2020年6月29日 (月) 07:19にAdministratorによる

2020-06-29T07:19:51Z

← 古い版		2020年6月29日 (月) 07:19時点における版
1行目:		1行目:
	[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface ~~プロパティを明示的に設定する必要がある）。~~		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定しておく必要がある）。
	フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。
	<source lang="csharp">		<source lang="csharp">

2020年6月29日 (月) 07:19にAdministratorによる

2020-06-29T07:19:32Z

← 古い版		2020年6月29日 (月) 07:19時点における版
1行目:		1行目:
	[[SkiaSharp]]~~で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。~~		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある（SKPaintのTypeface プロパティを明示的に設定する必要がある）。
	フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。
	<source lang="csharp">		<source lang="csharp">

2020年6月29日 (月) 07:16にAdministratorによる

2020-06-29T07:16:49Z

← 古い版		2020年6月29日 (月) 07:16時点における版
2行目:		2行目:
	フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。
	<source lang="csharp">		<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>		</source>

11行目:		11行目:
	== 実装例 ==		== 実装例 ==
	<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>

2018年6月19日 (火) 05:36に180.59.200.66による

2018-06-19T05:36:52Z

← 古い版		2018年6月19日 (火) 05:36時点における版
1行目:		1行目:
	~~SkiaSharpで日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。~~		[[SkiaSharp]]で日本語を描画する場合はかならず明示的にフォントを読み込ませる必要がある。
	~~フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。~~		フォント関連のクラス名は「SKTypeface」でありFont云々という名称ではないため探すのに一苦労するかもしれない。以下は[[Xamarin.Mac]]での例。
	~~以下はXamarin~~.~~Macでの例。~~
	<source lang="csharp">		<source lang="csharp">
	var paint = new SKPaint();		var paint = new SKPaint();
7行目:		6行目:
	</source>		</source>

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

103.22.200.139: /* 実装例 */

2018-06-12T05:58:52Z

実装例

← 古い版		2018年6月12日 (火) 05:58時点における版
15行目:		15行目:
	== 実装例 ==		== 実装例 ==
	<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;
28行目:		29行目:

	// 文字列を描画		// 文字列を描画
	// ~~描画位置の指定は「ベースライン」な点に注意~~		// 描画位置の指定は「ベースライン」な点に注意すること
	var text = "日本語";		var text = "日本語";
	var location = new SKPoint(100, 500);		var location = new SKPoint(100, 500);
49行目:		50行目:
	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"))

2017年11月16日 (木) 15:28にimported>Administratorによる

2017-11-16T15:28:16Z

← 古い版		2017年11月16日 (木) 15:28時点における版
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]]