記事一覧

Xamarin.iOS で画像に独自フォントで文字列を描画する | Xamarin.forms


Xamarin.iOS で独自フォントを使ってイメージに文字列を追加表示する方法をご紹介します。


表示結果
customfont1.png


前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin.forms 4.2.0.695
・macOS Sierra 10.12 / Xcode8 / Xamarin.iOS 10.0.1.8


1.フォントファイルを保存する

・iosプロジェクト/Resources/fonts フォルダを作成し、ttfファイルを保存します。
・出力ディレクトリにコピーを「常にコピーする」に設定します。


2.info.plistファイルを編集する

以下のコードを追加します。
UIAppFonts

 Fonts/ERASBD.TTF

customfont2.png

※フォルダの名前が「fonts」になっているにもかかわらず、info.plistの記載が「Fonts」となっており、
実機で動作しませんでした。info.plistの記載を「fonts」に変更したところ実機でも正しく動作しました。
大変申し訳ございませんでした。



3.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://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。