.NET MAUIで、Emoji(絵文字)やIcon(アイコン)を打とう

背景と目的

MAUIのImageなどでシステムアイコンを画像化したり、絵文字を使いたい！
今回は、SkiaSharpと.NET MAUIの併用で使う例を出す。
まぁ、通常のMAUIのImageの単独での使い方も、基礎的な部分は、変わらないので安心してほしい。(違いは、FontImageSourceとか使うだけ)

結論

フォントを読み込んでやるのが、一番簡単でシンプル。

アイコンとは…？

アイコンだと、Segoe Fluent Icons fontやMaterial Symbols and Iconsがあります。

絵文字とは…？

現在、emoji(絵文字)は、Unicodeの中に入っている。だが、全てのフォントデータに、emojiの中身が登録されている訳ではない。また、OSから絵文字が参照できるような仕組みが提供されていたりする。
wikipediaの絵文字一覧を見れば分かるが、通常の文字と同じく、Unicodeの番号を指定すれば、参照できる。
ネットには、NotoEmoji-VariableFont_wght.ttfとかあるが、Noto Sansでも可能。

実際に使ってみよう(絵文字)

今回は、NotoEmoji-VariableFont_wght.ttfを使ってみた。このフォントは、「埋め込みリソース」で登録されている。

なお、Noto Sansとかでも絵文字(デザインが違う)は内包されているので、それでも可。

Stream stream = assembly.GetManifestResourceStream("****ここにプロジェクト名****.***ここにフォルダ名***.NotoEmoji-VariableFont_wght.ttf");
SKPaint paint2 = new SKPaint
{
	Typeface = SKTypeface.FromStream(stream),
	Color = SKColors.Pink,
	IsAntialias = true,
	Style = SKPaintStyle.Fill,
	TextAlign = SKTextAlign.Center,
	TextSize = 150
};


// ----------------------------
// ここが超大事。文字コードを入れる。
// 絵文字なら、wikipediaの絵文字一覧を参照すると、何を参照するのか分かる。
var Text = "\U0001F4AE"; // 💮が出てくる
//　システム系のアイコンなら、
//  「Segoe Fluent Icons font」や「Material Symbols and Icons」を読み込んだ上で、
// var Text = "\xea8a"; // 「Segoe Fluent Icons font」なら「HomeSolid」アイコンが出てくる。
// ----------------------------


SKImageInfo info = new SKImageInfo(500,500);
info.ColorType = SKColorType.Bgra8888;
SKSurface data = SKSurface.Create(info);

var coord = new SKPoint(500/2, 500);
data.Canvas.DrawText(Text, coord, paint2);

var addr = () => {
	return data.Snapshot().Encode(SKEncodedImageFormat.Png, 100).AsStream();
};

// .NET MAUIのImageを作る
Image image = new Image() { 
	Source = ImageSource.FromStream(addr)),
		WidthRequest = data.Canvas.DeviceClipBounds.Width,
		HeightRequest = data.Canvas.DeviceClipBounds.Height
	}
};

＼(^o^)／

終わり。