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

イメージの描画以外のことも、いくつか補足しておきましょう。まずは、塗りつぶしに関するものです。イメージは指定の色で塗りつぶすことができますが、単色ではなく、複数色でグラディエーションすることもできます。

グラディエーションは、グラディエーション情報を管理するための専用のデータを用意し、これを使ってグラディエーションの設定を行います。下のリスト欄に簡単なサンプルを挙げておきます。これを見ながら、処理の流れを整理していくことにしましょう。

1. 色情報を配列にまとめる
まず最初に、グラディエーションで使用する色の情報を配列にまとめておきます。これは、RGBAの計４つの輝度を０〜１の実数で表した値を１つずつ並べた形になります。ざっとこんな感じですね。

[ R値 , G値 , B値 , A値 , R値 , G値 , B値 , A値 , ……]

２つの色を使う場合は、計８個の値が用意されます。ここでは３色を使っているので計12個の値が用意されています。これらの色値は、塗りつぶしの際に用いられる順番に用意してください。

2. 配置情報を配列にまとめる
次に、用意した各色がどの辺に配置されるのかを示す情報を配列にまとめます。これも０〜１の実数で指定されます。これは、「塗りつぶし領域のどのあたりに指定の色が描かれるように塗りつぶすか」を割合で指定したものです。例えば、「１つ目は一番最初に、２つ目は真ん中に、３つ目は最後に」というように配置したければ、[0.0, 0.5, 1.0]という形になります。

3. CGColorSpaceRefの用意
「CGColorSpaceRef」というのはカラースペースを管理する構造体です。これはグラディエーションの情報を作成する際に必要となるものです。これは、CGColorSpaceCreateDeviceRGB関数で作成します。以下のように記述するもの、と考えてください。

CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();

4. CGGradientRefの用意
グラディエーションに関する情報を管理する構造体「CGGradientRef」を作成します。これは「CGGradientCreateWithColorComponents」という関数を使って作成します。これは、以下のように４つの値を引数に指定して呼び出します。１〜３は、それぞれ既に用意してありますね。４つ目は使用する色数を制定します。

CGGradientCreateWithColorComponents(CGColorSpaceRef値, 
        色の配列, 配置の配列, 色数 );

5. 描画領域をクリップする
グラディエーションは、普通に図形を塗りつぶすのに使えるわけではありません。これは、あらかじめクリッピングを使って塗りつぶす図形の形状をクリップしておき、それからグラディエーションで図形の内部を塗りつぶす、というやり方をするのです。先に、パスを作ってクリップする方法について説明しましたね。あのようにしてクリッピングを設定しておきます。

CGRect r1 = CGRectMake(20.0 , 20.0, 100.0, 100.0);
CGContextClipToRect(context, r1);

今回は、もっと簡単にクリッピングを用意してあります。「CGContextClipToRect」というのは、第２引数に指定した四角い領域をクリップする関数です。今回はグラディエーションのサンプルなので、とりあえずクリッピングはこれでいいでしょう。興味のある人は、パスを使ってもっと複雑な図形を作って塗りつぶしてみるとよいでしょう。

6. ２点を指定してグラディエーションを行う
ようやく準備が整いました。後は、グラディエーションで塗りつぶすだけです。これには「CGContextDrawLinearGradient」という関数を使います。これは、引数にCGContextRef、グラディエーション情報のCGGradientRef、そしてグラディエーションの開始地点と終了地点を示すCGPoint、描画オプションといった値を指定します。

CGPoint p1 = CGPointMake(20.0, 20.0);
CGPoint p2 = CGPointMake(120.0, 120.0);
CGContextDrawLinearGradient(context, 
        gradient, p1, p2, 0);

これでグラディエーションの描画が行えました。注意したいのは最後の「描画オプション」というものですね。これは、描画開始位置・終了位置の外側の塗りつぶしをどうするか指定するもので、 kCGGradientDrawsBeforeStartLocation、 kCGGradientDrawsAfterEndLocation といった値が用意されています。が、まぁとりあえずゼロを指定しておいていいでしょう。

今回は、「CGContextDrawLinearGradient」という関数を使いましたが、これは２店を直線的に結ぶ形でグラディエーションをします。この他、同心円状にグラディエーションをする「CGContextDrawRadialGradient」という関数もあります。

CGContextDrawRadialGradient( CGContextRef, 
        CGGradientRef, 開始位置, 半径, 終了位置, 半径, オプション );

グラディエーションの開始位置・終了位置の他、開始位置と終了位置の半径も指定しておきます。この２つの関数で、基本的なグラディエーションは行えるようになるでしょう。

(by. SYODA-Tuyano.)

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

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

※グラディエーションさせる

- (void)drawRect:(CGRect)rect
{
	CGContextRef context = UIGraphicsGetCurrentContext();
	
	CGFloat colors[] = {
		1.0, 0.0, 0.0, 1.0, 
		1.0, 1.0, 0.0, 1.0, 
		0.0, 0.0, 1.0, 1.0 };
		CGFloat locs[] = {0.0, 0.5, 1.0};
		CGColorSpaceRef space = 
				CGColorSpaceCreateDeviceRGB();
		CGGradientRef gradient = 
				CGGradientCreateWithColorComponents
				(space,colors, locs, 3);
	
	CGRect r1 = CGRectMake(20.0 , 20.0, 100.0, 100.0);
	CGContextClipToRect(context, r1);
	CGPoint p1 = CGPointMake(20.0, 20.0);
	CGPoint p2 = CGPointMake(120.0, 120.0);
	CGContextDrawLinearGradient(context, 
			gradient, p1, p2, 0);
	
	CGGradientRelease(gradient);
	CGColorSpaceRelease(space);
}