コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
Xamarin.iOS で画像に独自フォントで文字列を描画する | Xamarin.forms
- 2016/10/02
- 05:09
Xamarin.iOS で独自フォントを使ってイメージに文字列を追加表示する方法をご紹介します。
表示結果
前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin.forms 4.2.0.695
・macOS Sierra 10.12 / Xcode8 / Xamarin.iOS 10.0.1.8
１．フォントファイルを保存する
・iosプロジェクト/Resources/fonts フォルダを作成し、ttfファイルを保存します。・出力ディレクトリにコピーを「常にコピーする」に設定します。
２．info.plistファイルを編集する
以下のコードを追加します。UIAppFonts Fonts/ERASBD.TTF
※フォルダの名前が「fonts」になっているにもかかわらず、info.plistの記載が「Fonts」となっており、
実機で動作しませんでした。info.plistの記載を「fonts」に変更したところ実機でも正しく動作しました。
大変申し訳ございませんでした。
３．C#でコードを記述します
以下のようなFunctionを作成して文字を表示させます。（※Dependency.Serivceにて記述可能です。）
ImageService.cs
using System.Drawing;
using Foundation;
using UIKit;
using Xamarin.Forms;
public class ImageService : IImageService
{
public Stream GetDrawStream(string text, int width, int height)
{
UIImage result = UIImage.FromFile("icon.png");
result = this.GetDrawTextBitmap(result, text);
var stream = result.AsPNG().AsStream();
stream.Position = 0;
return stream;
}
private UIImage GetDrawTextBitmap(UIImage image, string text) { //開始処理 UIGraphics.BeginImageContext(new CGSize(image.Size.Width, image.Size.Height)); CGContext context = UIGraphics.GetCurrentContext(); //元画像の表示 image.Draw(new CGPoint(0, 0)); //表示する文字の設定 NSString contentText = new NSString(text); //フォントと描画サイズの認識 nfloat fontSize = 64f; var font = UIFont.FromName("Eras Bold ITC", fontSize); //ファイル名ではなくフォント名で指定します。 UIStringAttributes attribs = new UIStringAttributes() { Font = font }; //var contentSize = contentText.StringSize(font); var contentSize = contentText.GetSizeUsingAttributes(attribs); //描画エリアを取得する float left = (float)((image.Size.Width - contentSize.Width) / 2); float top = (float)((image.Size.Height - contentSize.Height) / 2); RectangleF rectF = new RectangleF(left, top, (float)contentSize.Width, (float)contentSize.Height); //背景を表示 context.SetFillColor(UIColor.White.CGColor); context.FillRect(rectF); //テキストを表示 context.SetFillColor(UIColor.Blue.CGColor); //文字の色 contentText.DrawString(rectF, font, UILineBreakMode.WordWrap, UITextAlignment.Center); //終了処理 UIImage retImg = UIGraphics.GetImageFromCurrentImageContext(); UIGraphics.EndImageContext(); return retImg;
}
}
以上です。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblog.dynaspo.com/blog-entry-81.html
ナビゲーションバーの戻るボタンの名称を変更する方法 | Xamarin.forms ホーム
The operation couldn’t be completed. (Cocoa error 4.) のエラーが発生する | Xamarin.forms
