Core Graphicsを更に使いこなそう! (1/6)
作成:2011-04-18 07:48
更新:2011-04-23 22:20
更新:2011-04-23 22:20
■テキストの描画は?
図形の描画はなんとなく分かってきましたが、こうした描画は図形だけでなく、テキストをグラフィックとして描くこともあるでしょう。グラフィックとしてテキストを描く機能はないのでしょうか。
もちろん、あります。ただし、これはちょっとばかり利用がややこしいのです。とりあえず、下に簡単なサンプルコードを掲載しておきましょう。これは、画面に「iPhone」というテキストを表示するサンプルです。が、テキストを描画するには、その前にいろいろと設定しておくべき事柄があります。順に説明していきましょう。――ここでは、前回作成したMySampleAppプロジェクトをそのまま利用します。MySampleViewというUIView継承クラスを画面に配置し、このクラスで描画の処理を行うようになっていましたね(詳しくは前回の記事を参照のこと)。
1. 基本的な準備をする
まずは、CGContextRefを取得し、塗りつぶしと線分の色を設定します。テキストの場合、この両方の色が用いられます。また輪郭線の太さは、図形と同様にCGContextSetLineWidth:で設定されます。
2. フォントを指定する
テキストを描くには、使用するフォントを指定しないといけません。これは「CGContextSelectFont」という関数で行います。引数にはCGContextRefの他、フォント名、フォントサイズ、エンコーディングを示す値を指定します。エンコーディングは、通常のRomanテキストの描画であれば、kCGEncodingMacRomanを指定しておきます。
3. 描画モードの設定
続いて、描画モードを指定します。これは、CGContextRefと、描画モードを示す定数を引数に渡します。定数は色々用意されていますが、基本はkCGTextFill、kCGTextStroke、kCGTextFillStrokeのいずれかと考えていいでしょう。これで塗りつぶして描画するか、輪郭線を描くか、両方描くかを指定するものです。
4. ちゃんと表示するためのおまじない
これで、描画の準備は整いました。もうテキストを描くことができます。が、その前に、以下の文を必ず実行しておきましょう。これは、「おまじない」です。(後で説明します)
5. テキストを描く
えテキストの描画は2種類の関数がありますが、とりあえず「位置を指定して描く」というやり方を覚えておけばよいでしょう。これは引数にCGContextRef、横位置、縦位置、描くテキスト、文字数をそれぞれ渡します。テキストは、NSStringではなく、CStringの値(char配列やcharポインタなど)を指定してください。
――さて、ここで説明した文の中で、実は「テキストの描画とは何の関係もない文」が1つ混じっています。それは、CGAffineTransformMake関数とCGContextSetTextMatrix関数です。これ、なくてもテキストの描画そのものには影響しないのです。
では、実際にこの2文を削除してどうなるか試してみましょう。テキストが、上下さかさまになって描画されたはずです。なんだってこんなことになるのか?というと……話せば長くなるのですが……。要するに、iOSの中では、座標軸の異なる座標系が混在しているのだ、と考えてください。
もちろん、あります。ただし、これはちょっとばかり利用がややこしいのです。とりあえず、下に簡単なサンプルコードを掲載しておきましょう。これは、画面に「iPhone」というテキストを表示するサンプルです。が、テキストを描画するには、その前にいろいろと設定しておくべき事柄があります。順に説明していきましょう。――ここでは、前回作成したMySampleAppプロジェクトをそのまま利用します。MySampleViewというUIView継承クラスを画面に配置し、このクラスで描画の処理を行うようになっていましたね(詳しくは前回の記事を参照のこと)。
1. 基本的な準備をする
まずは、CGContextRefを取得し、塗りつぶしと線分の色を設定します。テキストの場合、この両方の色が用いられます。また輪郭線の太さは、図形と同様にCGContextSetLineWidth:で設定されます。
2. フォントを指定する
テキストを描くには、使用するフォントを指定しないといけません。これは「CGContextSelectFont」という関数で行います。引数にはCGContextRefの他、フォント名、フォントサイズ、エンコーディングを示す値を指定します。エンコーディングは、通常のRomanテキストの描画であれば、kCGEncodingMacRomanを指定しておきます。
CGContextSelectFont(context, "Arial Bold", 48, kCGEncodingMacRoman);
3. 描画モードの設定
続いて、描画モードを指定します。これは、CGContextRefと、描画モードを示す定数を引数に渡します。定数は色々用意されていますが、基本はkCGTextFill、kCGTextStroke、kCGTextFillStrokeのいずれかと考えていいでしょう。これで塗りつぶして描画するか、輪郭線を描くか、両方描くかを指定するものです。
CGContextSetTextDrawingMode(context, kCGTextFillStroke);
4. ちゃんと表示するためのおまじない
これで、描画の準備は整いました。もうテキストを描くことができます。が、その前に、以下の文を必ず実行しておきましょう。これは、「おまじない」です。(後で説明します)
CGAffineTransform affine = CGAffineTransformMake(1.0, 0.0, 0.0,
-1.0, 0.0, 0.0);
CGContextSetTextMatrix(context, affine);
5. テキストを描く
えテキストの描画は2種類の関数がありますが、とりあえず「位置を指定して描く」というやり方を覚えておけばよいでしょう。これは引数にCGContextRef、横位置、縦位置、描くテキスト、文字数をそれぞれ渡します。テキストは、NSStringではなく、CStringの値(char配列やcharポインタなど)を指定してください。
CGContextShowTextAtPoint(context, 50.0, 50.0, "iPhone", 6);
――さて、ここで説明した文の中で、実は「テキストの描画とは何の関係もない文」が1つ混じっています。それは、CGAffineTransformMake関数とCGContextSetTextMatrix関数です。これ、なくてもテキストの描画そのものには影響しないのです。
では、実際にこの2文を削除してどうなるか試してみましょう。テキストが、上下さかさまになって描画されたはずです。なんだってこんなことになるのか?というと……話せば長くなるのですが……。要するに、iOSの中では、座標軸の異なる座標系が混在しているのだ、と考えてください。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※MySampleView.mのメソッド - (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0); CGContextSetRGBStrokeColor(context, 0.5, 0.0, 1.0, 1.0); CGContextSetLineWidth(context, 2.0); CGContextSelectFont(context, "Arial Bold", 48, kCGEncodingMacRoman); CGContextSetTextDrawingMode(context, kCGTextFillStroke); CGAffineTransform affine = CGAffineTransformMake (1.0, 0.0, 0.0, -1.0, 0.0, 0.0); CGContextSetTextMatrix(context, affine); CGContextShowTextAtPoint(context, 50.0, 50.0, "iPhone", 6); }
※関連コンテンツ
「初心者のためのiphone/ipadプログラミング入門」に戻る