UIViewとグラフィックの描画 (3/4)

では、MySampleViewに図形を描画する処理を作成しましょう。コメントアウトされていた、drawRect:メソッドのコメントをカットして使える状態にしてください。そして、下のリスト欄に掲載したようにdrawRect:メソッドを記述しましょう。

記述ができたら、エミュレータで実行してみてください。オレンジに塗りつぶされた四角形と、濃いピンクの線で描いた四角形が表示されます。これが、今回作成したメソッドで描画した図形です。

図形の描画は、けっこう色々な関数や構造体が登場します。これらは、必要な手続きの順番などが決まっています。全体的な流れを整理しながら、１つ１つの処理を検証していきましょう。

1. CGContextRefの取得
まず最初に行うのは、CGContextRefという値の取得です。これは、UIGraphicsGetCurrentContextという関数を使って呼び出します。このCGContextRefは、描画に必要な情報などを管理する構造体です。描画関数を利用する際には、必ずこれを用意しておく必要があります。

CGContextRef context = UIGraphicsGetCurrentContext();

――描画は、大きく分けると２つの描画方法が用意されています。１つは「塗りつぶし」、もう１つは「線分描画」です。塗りつぶしは、指定された図形の内部を塗りつぶすものです。そして線分描画は、指定された図形の輪郭線を描くものです。描画は、基本的にこの２つのものを組み合わせて行います。

それぞれの描画は、「色やその他の設定」「描く図形の追加」「描画の実行」という流れで処理を行います。これは、塗部節と線分描画の両方にそれぞれ設定を行うことができます。まずは、この「描画の流れ」をしっかり理解しておいてください。

2. 描画色の設定
まずは、描画に使う色をCGContextRefに設定します。これは２つのメソッドが用意されています。

CGContextSetRGBFillColor――塗りつぶしの色を設定します。
CGContextSetRGBStrokeColor――線分描画の色を設定します。

いずれも、引数は５つ用意します。１つ目は、描画に利用するCGContextRef。そして２〜５番目の引数は、それぞれ「赤」「緑」「青」「アルファチャンネル」のそれぞれの輝度を0.0〜1.0の間の実数で指定します。色の設定は、このようにRGB各色の輝度によって行います。またアルファチャンネルはその色の透過度を示すもので、ゼロなら透明、1.0なら不透明となります。

CGContextSetRGBFillColor(context, 1.0, 0.5, 0.0, 1.0);
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.5, 1.0);

3. 描画に関する設定
色の設定の他に、描画に関する設定などが必要であれば行っておきます。例えば、ここでは線分描画の際に使用される「線の太さ」を以下のように10ドット幅に設定しています。

CGContextSetLineWidth(context, 10.0);

4. 描画図形の設定
次に、図形を描画する領域を設定します。領域は、「CGRect」という構造体の値として用意します。これは、「CGRectMake」という関数で作成することができます。この関数は、「横位置、縦位置、横幅、縦幅」という４つの値を引数に渡して呼び出します。

こうして作成されたCGRectは、「CGContextAddRect」という関数を使って四角形の図形として追加をします。これは、引数にCGContextRefとCGRectを渡して呼び出します。このCGContextAddRectは、領域の情報を「追加」していきます。変更ではありません。ですから、例えば何度も呼び出して領域を追加していくことで、複雑な図形を組み込むこともできます。

CGRect r1 = CGRectMake(50.0 , 50.0, 100.0, 100.0);
CGContextAddRect(context,r1);

5. 図形を描画する
ようやく図形の描画を行います。描画をしているのは、以下の２文です。「CGContextFillPath」は、内部を塗りつぶした図形を描きます。「CGContextStrokePath」は、線分だけの図形を描きます。どちらも引数にはCGContextRefを渡します。

CGContextFillPath(context);
CGContextStrokePath(context);

――描画を行うとき、注意しなければいけないのは、「描画を行うと、描く図形の情報はクリアされる」という点でしょう。描く色の情報や線の太さといった情報は描画を行った後も保持されるのですが、CGContextAddRectで追加された図形の情報は、一度描画の関数（CGContextFillPathやCGContextStrokePathなど）を呼び出すとクリアされます。したがって、複数の図形を描く際には、描画する度に、次に描く図形を追加することを忘れないようにしてください。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※MySampleView.mに用意するメソッド

- (void)drawRect:(CGRect)rect
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGContextSetRGBFillColor(context, 
			1.0, 0.5, 0.0, 1.0);
	CGContextSetRGBStrokeColor(context, 
			1.0, 0.0, 0.5, 1.0);
	CGContextSetLineWidth(context, 10.0);
	CGRect r1 = CGRectMake(50.0 , 50.0, 100.0, 100.0);
	CGContextAddRect(context,r1);
	CGContextFillPath(context);
	CGRect r2 = CGRectMake(100.0 , 100.0, 100.0, 100.0);
	CGContextAddRect(context,r2);
	CGContextStrokePath(context);
}