back
Core Graphicsを更に使いこなそう！ (1/6)
■テキストの描画は？
図形の描画はなんとなく分かってきましたが、こうした描画は図形だけでなく、テキストをグラフィックとして描くこともあるでしょう。グラフィックとしてテキストを描く機能はないのでしょうか。
もちろん、あります。ただし、これはちょっとばかり利用がややこしいのです。とりあえず、下に簡単なサンプルコードを掲載しておきましょう。これは、画面に「iPhone」というテキストを表示するサンプルです。が、テキストを描画するには、その前にいろいろと設定しておくべき事柄があります。順に説明していきましょう。――ここでは、前回作成したMySampleAppプロジェクトをそのまま利用します。MySampleViewというUIView継承クラスを画面に配置し、このクラスで描画の処理を行うようになっていましたね（詳しくは前回の記事を参照のこと）。
1. 基本的な準備をする
まずは、CGContextRefを取得し、塗りつぶしと線分の色を設定します。テキストの場合、この両方の色が用いられます。また輪郭線の太さは、図形と同様にCGContextSetLineWidth:で設定されます。
2. フォントを指定する
テキストを描くには、使用するフォントを指定しないといけません。これは「CGContextSelectFont」という関数で行います。引数にはCGContextRefの他、フォント名、フォントサイズ、エンコーディングを示す値を指定します。エンコーディングは、通常のRomanテキストの描画であれば、kCGEncodingMacRomanを指定しておきます。
3. 描画モードの設定
続いて、描画モードを指定します。これは、CGContextRefと、描画モードを示す定数を引数に渡します。定数は色々用意されていますが、基本はkCGTextFill、kCGTextStroke、kCGTextFillStrokeのいずれかと考えていいでしょう。これで塗りつぶして描画するか、輪郭線を描くか、両方描くかを指定するものです。
4. ちゃんと表示するためのおまじない
これで、描画の準備は整いました。もうテキストを描くことができます。が、その前に、以下の文を必ず実行しておきましょう。これは、「おまじない」です。（後で説明します）
5. テキストを描く
えテキストの描画は２種類の関数がありますが、とりあえず「位置を指定して描く」というやり方を覚えておけばよいでしょう。これは引数にCGContextRef、横位置、縦位置、描くテキスト、文字数をそれぞれ渡します。テキストは、NSStringではなく、CStringの値（char配列やcharポインタなど）を指定してください。
――さて、ここで説明した文の中で、実は「テキストの描画とは何の関係もない文」が１つ混じっています。それは、CGAffineTransformMake関数とCGContextSetTextMatrix関数です。これ、なくてもテキストの描画そのものには影響しないのです。
では、実際にこの２文を削除してどうなるか試してみましょう。テキストが、上下さかさまになって描画されたはずです。なんだってこんなことになるのか？というと……話せば長くなるのですが……。要するに、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. テキストを描く
えテキストの描画は２種類の関数がありますが、とりあえず「位置を指定して描く」というやり方を覚えておけばよいでしょう。これは引数にCGContextRef、横位置、縦位置、描くテキスト、文字数をそれぞれ渡します。テキストは、NSStringではなく、CStringの値（char配列やcharポインタなど）を指定してください。
CGContextShowTextAtPoint(context, 50.0, 50.0, "iPhone", 6);
――さて、ここで説明した文の中で、実は「テキストの描画とは何の関係もない文」が１つ混じっています。それは、CGAffineTransformMake関数とCGContextSetTextMatrix関数です。これ、なくてもテキストの描画そのものには影響しないのです。
では、実際にこの２文を削除してどうなるか試してみましょう。テキストが、上下さかさまになって描画されたはずです。なんだってこんなことになるのか？というと……話せば長くなるのですが……。要するに、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);
}
| 次へ >> |