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

基本的な図形の描き方はわかりました。では、四角形以外の図形にも色々と挑戦してみることにしましょう。図形の描画は、どのような形の図形であれ、その基本的な手続きは同じです。色や線の太さなどの設定を行い、それから描く図形を設定し、塗りつぶしや線分描画の関数を呼び出して描画をする、という形ですね。

ただし、これまでと同じように実行するのでは、同様に四角形が描かれるだけです。――先のサンプルで四角形を描いたときには、CGContextAddRectという関数を呼び出しました。これは、引数に指定したCGRectをそのまま四角形として追加するものでした。ということは、四角形ではなく、他の図形を追加する関数を使えば、さまざまな図形が組み込めることになりますね。

◯円の描画
円の描画は、比較的簡単です。これは、四角形とほとんど同じだからです。円を描く祭には以下のような関数を呼び出します。これは、引数に指定した領域（CGRect）にぴったりはめ込まれるサイズの円として図形を追加するためのものです。

CGContextAddEllipseInRect( 《CGContextRef》,《CGRect》);

◯直線の描画(1)
直線の描画にはいくつかやり方があります。１つは、描画する位置の情報を配列としてまとめて描くやり方からです。――これは、予め描く直線の点の情報をCGPointという構造体の配列としてまとめたものを用意し、これを使って直線を描きます。CGPointは、「CGPointMake( 横位置 , 縦位置 )」という関数を使って作成することができます。３番目の引数には描く点の数を指定します。

CGContextAddLines(《CGContextRef》,《CGPoint配列》,《ポイント数》);

◯直線の描画(2)
もう１つのやり方は、「描画地点」を線の開始部分に移動し、そこから「この点まで線を引く」という形で位置を追加して線を追加するやり方です。まずは、描画を開始する位置まで「描画地点」を移動します。これは、その位置の横位置と縦位置をそれぞれ引数に渡して関数を呼び出します。

CGContextMoveToPoint(《CGContextRef》, 横位置 , 縦位置 );

これで、描画を開始する位置まで描画地点が移動しました。後は、そこからもう１つの点まで線を追加する関数を呼び出します。これも、次の位置を引数で指定します。――これを呼び出すと、線が追加されると同時に、描画地点は指定した位置まで変更されます。つまり、続けて何度も呼び出していくことで、連続して線を描けるわけですね。

CGContextMoveToPoint(《CGContextRef》, 横位置 , 縦位置 );

◯曲線の描画
曲線と一口にいってもさまざまなやり方で描かれます。ここでは、２点の間に２つのコントロールポイントを用意し、これに基づいて曲線を描くやり方について説明をしましょう。これも、まずは描画する位置まで描画地点を移動します。

CGContextMoveToPoint(《CGContextRef》, 横位置 , 縦位置 );

これは既に説明済みですね。続いて、そこから次の点まで曲線を描くための図形を追加します。これは、現在の点から描画するための１つ目のコントロールポイント、次の位置までの描画を行うための２つ目のコントロールポイント、そして次の位置、という３つの位置の情報を引数に用意します。

CGContextAddCurveToPoint(《CGContextRef》, 横位置c1 , 縦位置c1 , 
        横位置c2 , 縦位置c2 , 横位置 , 縦位置 );

――最後の曲線描画は、ちょっとわかりにくいかも知れません。Illustratorなどの図形描画ツールを使ったことがあれば、曲線を描くのに、「２つの位置と２つのコントロールポイント」を調整していくことを知っていると思います。あれの位置を指定して同じように描かせている、と考えてください。

Illustratorなどを使ったことがない人は……まぁ、試行錯誤で実際に曲線を描いてみましょう。そして、少しずつコントロールポイントの位置を変更して、図形がどう変化するかを見ていけば、次第に曲線描画の仕組みがわかってくることでしょう。

下に、円、直線、曲線といった図形の描画例をあげておきます。描かれる図形と、描く位置の情報などをよく比べてみてください。

とりあえず、これで基本図形ぐらいは描けるようになりました。次回は、もう少しさまざまな描画機能について掘り下げていくことにしましょう。

(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(20.0 , 20.0, 100.0, 100.0);
	CGContextAddEllipseInRect(context,r1);
	CGContextFillPath(context);
	
	CGContextMoveToPoint(context, 50, 100);
	CGContextAddLineToPoint(context, 150, 100);
	CGContextAddLineToPoint(context, 50, 200);
	CGContextAddLineToPoint(context, 150, 200);
	CGContextStrokePath(context);
	
	CGContextMoveToPoint(context,50, 250);
	CGContextAddCurveToPoint(context, 
			100, 250, 100, 200, 150, 250);
	CGContextAddCurveToPoint(context, 
			200, 350, 50, 250, 50, 350);
	CGContextStrokePath(context);
}