Core Graphicsを更に使いこなそう! (6/6)
作成:2011-04-18 08:02
更新:2011-04-18 08:09
更新:2011-04-18 08:09
■グラディエーションしよう
イメージの描画以外のことも、いくつか補足しておきましょう。まずは、塗りつぶしに関するものです。イメージは指定の色で塗りつぶすことができますが、単色ではなく、複数色でグラディエーションすることもできます。
グラディエーションは、グラディエーション情報を管理するための専用のデータを用意し、これを使ってグラディエーションの設定を行います。下のリスト欄に簡単なサンプルを挙げておきます。これを見ながら、処理の流れを整理していくことにしましょう。
1. 色情報を配列にまとめる
まず最初に、グラディエーションで使用する色の情報を配列にまとめておきます。これは、RGBAの計4つの輝度を0〜1の実数で表した値を1つずつ並べた形になります。ざっとこんな感じですね。
2. 配置情報を配列にまとめる
次に、用意した各色がどの辺に配置されるのかを示す情報を配列にまとめます。これも0〜1の実数で指定されます。これは、「塗りつぶし領域のどのあたりに指定の色が描かれるように塗りつぶすか」を割合で指定したものです。例えば、「1つ目は一番最初に、2つ目は真ん中に、3つ目は最後に」というように配置したければ、[0.0, 0.5, 1.0]という形になります。
3. CGColorSpaceRefの用意
「CGColorSpaceRef」というのはカラースペースを管理する構造体です。これはグラディエーションの情報を作成する際に必要となるものです。これは、CGColorSpaceCreateDeviceRGB関数で作成します。以下のように記述するもの、と考えてください。
4. CGGradientRefの用意
グラディエーションに関する情報を管理する構造体「CGGradientRef」を作成します。これは「CGGradientCreateWithColorComponents」という関数を使って作成します。これは、以下のように4つの値を引数に指定して呼び出します。1〜3は、それぞれ既に用意してありますね。4つ目は使用する色数を制定します。
5. 描画領域をクリップする
グラディエーションは、普通に図形を塗りつぶすのに使えるわけではありません。これは、あらかじめクリッピングを使って塗りつぶす図形の形状をクリップしておき、それからグラディエーションで図形の内部を塗りつぶす、というやり方をするのです。先に、パスを作ってクリップする方法について説明しましたね。あのようにしてクリッピングを設定しておきます。
6. 2点を指定してグラディエーションを行う
ようやく準備が整いました。後は、グラディエーションで塗りつぶすだけです。これには「CGContextDrawLinearGradient」という関数を使います。これは、引数にCGContextRef、グラディエーション情報のCGGradientRef、そしてグラディエーションの開始地点と終了地点を示すCGPoint、描画オプションといった値を指定します。
今回は、「CGContextDrawLinearGradient」という関数を使いましたが、これは2店を直線的に結ぶ形でグラディエーションをします。この他、同心円状にグラディエーションをする「CGContextDrawRadialGradient」という関数もあります。
グラディエーションは、グラディエーション情報を管理するための専用のデータを用意し、これを使ってグラディエーションの設定を行います。下のリスト欄に簡単なサンプルを挙げておきます。これを見ながら、処理の流れを整理していくことにしましょう。
1. 色情報を配列にまとめる
まず最初に、グラディエーションで使用する色の情報を配列にまとめておきます。これは、RGBAの計4つの輝度を0〜1の実数で表した値を1つずつ並べた形になります。ざっとこんな感じですね。
[ R値 , G値 , B値 , A値 , R値 , G値 , B値 , A値 , ……]2つの色を使う場合は、計8個の値が用意されます。ここでは3色を使っているので計12個の値が用意されています。これらの色値は、塗りつぶしの際に用いられる順番に用意してください。
2. 配置情報を配列にまとめる
次に、用意した各色がどの辺に配置されるのかを示す情報を配列にまとめます。これも0〜1の実数で指定されます。これは、「塗りつぶし領域のどのあたりに指定の色が描かれるように塗りつぶすか」を割合で指定したものです。例えば、「1つ目は一番最初に、2つ目は真ん中に、3つ目は最後に」というように配置したければ、[0.0, 0.5, 1.0]という形になります。
3. CGColorSpaceRefの用意
「CGColorSpaceRef」というのはカラースペースを管理する構造体です。これはグラディエーションの情報を作成する際に必要となるものです。これは、CGColorSpaceCreateDeviceRGB関数で作成します。以下のように記述するもの、と考えてください。
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
4. CGGradientRefの用意
グラディエーションに関する情報を管理する構造体「CGGradientRef」を作成します。これは「CGGradientCreateWithColorComponents」という関数を使って作成します。これは、以下のように4つの値を引数に指定して呼び出します。1〜3は、それぞれ既に用意してありますね。4つ目は使用する色数を制定します。
CGGradientCreateWithColorComponents(CGColorSpaceRef値,
色の配列, 配置の配列, 色数 );
5. 描画領域をクリップする
グラディエーションは、普通に図形を塗りつぶすのに使えるわけではありません。これは、あらかじめクリッピングを使って塗りつぶす図形の形状をクリップしておき、それからグラディエーションで図形の内部を塗りつぶす、というやり方をするのです。先に、パスを作ってクリップする方法について説明しましたね。あのようにしてクリッピングを設定しておきます。
CGRect r1 = CGRectMake(20.0 , 20.0, 100.0, 100.0);今回は、もっと簡単にクリッピングを用意してあります。「CGContextClipToRect」というのは、第2引数に指定した四角い領域をクリップする関数です。今回はグラディエーションのサンプルなので、とりあえずクリッピングはこれでいいでしょう。興味のある人は、パスを使ってもっと複雑な図形を作って塗りつぶしてみるとよいでしょう。
CGContextClipToRect(context, r1);
6. 2点を指定してグラディエーションを行う
ようやく準備が整いました。後は、グラディエーションで塗りつぶすだけです。これには「CGContextDrawLinearGradient」という関数を使います。これは、引数にCGContextRef、グラディエーション情報のCGGradientRef、そしてグラディエーションの開始地点と終了地点を示すCGPoint、描画オプションといった値を指定します。
CGPoint p1 = CGPointMake(20.0, 20.0);これでグラディエーションの描画が行えました。注意したいのは最後の「描画オプション」というものですね。これは、描画開始位置・終了位置の外側の塗りつぶしをどうするか指定するもので、 kCGGradientDrawsBeforeStartLocation、 kCGGradientDrawsAfterEndLocation といった値が用意されています。が、まぁとりあえずゼロを指定しておいていいでしょう。
CGPoint p2 = CGPointMake(120.0, 120.0);
CGContextDrawLinearGradient(context,
gradient, p1, p2, 0);
今回は、「CGContextDrawLinearGradient」という関数を使いましたが、これは2店を直線的に結ぶ形でグラディエーションをします。この他、同心円状にグラディエーションをする「CGContextDrawRadialGradient」という関数もあります。
CGContextDrawRadialGradient( CGContextRef,グラディエーションの開始位置・終了位置の他、開始位置と終了位置の半径も指定しておきます。この2つの関数で、基本的なグラディエーションは行えるようになるでしょう。
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); }
※関連コンテンツ
「初心者のためのiphone/ipadプログラミング入門」に戻る