.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.25 2009

Quartz でグラデーション

Tasaki です。

ここのところ、Quartz の機能紹介の特集みたいになってますが、
今回もその辺りの話です。

Mac のプログラミング経験がある方は、難なく扱えるのでしょうが、
なにぶん、iPhone アプリ開発に際して初めて Mac に
触れた僕のような方は、結構いらっしゃるかと思いますので
参考になれば幸いです。

さて、Quartz にはグラデーションを描画するための機能が
備わっており、そのためのデータ型として CGGradient が用意されています。
また、そのパターンも線形と放射状の2通りがあります。
この辺の話は公式ドキュメントの Quartz 2D Programming Guide に
詳しく書かれています。

今回のコードの流れは、こんな感じです。
①グラデーション情報の定義
②パスの生成
③描画
④後処理

まず、グラデーション情報を定義する訳ですが、
これには次の2種類の関数が用意されています。
CGGradientRef CGGradientCreateWithColors( CGColorSpaceRef space, CFArrayRef colors, const CGFloat locations )
CGGradientRef CGGradientCreateWithColorComponents( CGColorSpaceRef space, const CGFloat components[], const CGFloat locations[], size_t count )

見たところ、両者の引数はかなり似ていますが、
色の指定に、Objective-C の配列を使うか C の配列を使うかによって
使い分けを行うための措置というところですかね。

僕はずっと C に親しんできたので、下側の関数を使うことにします。
space は色空間情報、
components は色を表す数値の配列、
locations は色の位置の配列を、
count は1色を表現するのに要するバイト量を表します。
ここでいう、色の位置とは0から1の間の数値を指し、
ある色が、グラデーション全体のどの付近で表れるかを決めるものです。
ここが NULL の場合は、線形的に色が変化していきます。

具体的には、例えば黒から白に線形に変わるグラデーションは、
このように表します。
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = { 0.0f, 0.0f, 0.0f, 1.0f,
             1.0f, 1.0f, 1.0f, 1.0f };
size_t count = sizeof( components )/ sizeof( CGFloat )* 4;
CGGradientRef gradient = CGGradientCreateWithColorComponents( space, components, NULL, count );

次は、パスの生成ですが、
これは前々回のエントリを参考にしてください。
ただし、描画関数を呼んでしまうと、
設定していたパスがクリアされてしまいますので注意してください。

続いて描画に関してですが、
このために、以下のグラデーション専用の関数が用意されています。
void CGContextDrawLinearGradient( CGContextRef context, CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint, CGGradientDrawingOptions options )
void CGContextDrawRadialGradient( CGContextRef context, CGGradientRef gradient, CGPoint startPoint, CGFloat startRadius, CGPoint endPoint, CGFloat endRadius, CGGradientDrawingOptions options )

前者が線形グラデーション、後者が放射状グラデーションを
描画するための関数です。

今回は線形グラデーションを試してみます。
引数ですが、
context、gradient の説明は省略しまして、
startPoint、endPoint はそれぞれグラデーションの始点と終点を、
options は始点と終点の外側の領域の描画方法を示すフラグを表します。

今回は、始点より前は始点と同じ色、終点より後は終点と同じ色として
描画する場合のコードを紹介します。
startPoint、endPoint はグラデーションをかけたい方向を考えて
与えるといいでしょう。
CGContextDrawLinearGradient( context, gradient, startPoint, endPoint, kCGGradientDrawBeforeStartLocation | kCGGradientAfterEndLocation );

最後に後始末をして、
色空間やグラデーションなどの使用済みのオブジェクトを解放します。
CGGradientRelease( gradient );
CGColorSpaceRelease( space );

今回は少し長くなってしまいましたが、
これで終わりです。お疲れさまでした。

関連記事
スポンサーサイト

Comment

Post comment

  • comment
  • secret
  • 管理者にだけ表示を許可する

Trackback

trackbackURL:http://appteam.blog114.fc2.com/tb.php/22-885b75d7

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。