Core Graphicsを更に使いこなそう！ (5/6)

複雑な図形を描くとき、「基本図形の組み合わせではうまく作れない」ということがよくあります。特に、描く図形をそのまま使うのではなく、その図形を加工して表示させたいような場合、図形の組み合わせでは限界があります。

こんなときに使われるのが「クリッピング」と呼ばれるものです。これは、グラフィックの中に特定の形状を設定し、その部分だけを切り抜くようにして図形を描く機能です。といってもイメージしにくいでしょうから、まずはサンプルを見てみましょう。

下に掲載したリストを実行すると、三角形の図形が表示されます。が、よく見ると、その中は３つの円で塗りつぶされていますね？　これはつまり、「３つの円を描いているのだけど、三角形の部分だけを切り取って貼りつけたようになっている」のです。これが、クリッピングの効果です。

クリッピングは、あらかじめ指定しておいた形状の領域内しか描画がされないようにする機能です。どんなに描画をしても、その領域外には何も描かれません。つまり下のサンプルでは、あらかじめ三角形のクリッピング領域を設定しておいてから、３つの円を描いていたのですね。

このクリッピングでは、「パス」と呼ばれるものを使ってクリッピングする図形の形状を作成します。パスというのは、図形の形状に関する情報を管理するもので、パスにさまざまな図形を追加していくことで複雑な図形の形状を作り出すことができるようになっています。クリッピングを利用するには、「パスの作成」「クリッピングの設定」「描画」といった流れで処理を行うことになります。ではて順を追って説明しましょう。

1. パスの開始
まずは、パスの作成を開始します。これは「CGContextBeginPath」を呼び出すだけです。

CGContextBeginPath(context);

2. 図形をパスに追加する
パスの形状となる図形を追加していきます。これは、さまざまな図形を追加するための関数が用意されています。ここでは、直線を使って三角形を描いています。この部分ですね。

CGContextMoveToPoint(context, 50, 50);
CGContextAddLineToPoint(context, 50, 200);
CGContextAddLineToPoint(context, 200, 125);

3. パスを閉じる
パスの図形を作成し終えたら、パスを閉じます。これは「CGContextClosePath」を呼び出すだけです。このとき、作成した図形が閉じてない（線分だけで内部を塗りつぶせる領域になってない）場合は、終了点と開始点を結んで自動的に閉じます。なお、「図形を閉じなくていい（線のままでいい）」という場合は呼び出さなくてOKです。

CGContextClosePath(context);

4. クリッピングを設定する
作成したパスをもとにクリッピングを設定します。これは「CGContextClip」を呼び出すだけです。

CGContextClip(context);

5. 描画を実行する
これでクリッピングはできたので、あとは普通に描画するだけです。ここでは円を描いていますが、通常と同じく、CGContextSetRGBFillColorで塗りつぶしの色を設定し、CGContextAddEllipseInRectで円を追加してCGContextFillPathで塗りつぶす、ということを繰り返しています。

CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 0.25);
CGContextAddEllipseInRect(context,CGRectMake(0, 0, 150, 150));
CGContextFillPath(context);

――ざっと見ればわかるように、パスとクリッピングに関する新しい関数は、基本的にCGContextRefを引数に指定して呼び出すだけというようなシンプルなものです。それほど難しい作業ではありませんね。

また、パスに図形を設定する際に用いている関数は、普通に図形を描画するのに使うものをそのまま利用します。ですから、図形の描画ができれば、全く同じやりかたでパスも作成できるのです。わかってしまえば、意外と簡単でしょう？

(by. SYODA-Tuyano.)

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

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

- (void)drawRect:(CGRect)rect
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	
	CGContextBeginPath(context);
	CGContextMoveToPoint(context, 50, 50);
	CGContextAddLineToPoint(context, 50, 200);
	CGContextAddLineToPoint(context, 200, 125);
	CGContextClosePath(context);
	CGContextClip(context);
	
	CGContextSetRGBFillColor(context, 
			1.0, 0.0, 0.0, 0.25);
	CGContextAddEllipseInRect(context,
			CGRectMake(0, 0, 150, 150));
	CGContextFillPath(context);
	CGContextSetRGBFillColor(context, 0.0, 
			1.0, 0.0, 0.25);
	CGContextAddEllipseInRect(context,
			CGRectMake(100, 50, 150, 150));
	CGContextFillPath(context);
	CGContextSetRGBFillColor(context, 0.0, 
			0.0, 1.0, 0.25);
	CGContextAddEllipseInRect(context,
			CGRectMake(0, 100, 150, 150));
	CGContextFillPath(context);
}