fc2ブログ

記事一覧

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://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


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

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

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