陰影


陰影は、図 7-1 に示すように、陰影がグラフィックスオブジェクト上の光源キャストの効果を模倣するように、グラフィックスオブジェクトの下にペイントされ、オフセットされたイメージです。テキストに陰影をつけることもできます。陰影は、イメージを 3 次元または浮遊しているように見せることができます。


陰影には 3 つの特徴があります。


この章では、陰影の仕組みを説明し、Quartz 2D API を使用してそれらを作成する方法を示します。



陰影の仕組み


Quartz での陰影はグラフィックス状態の一部です。CGContextSetShadow 関数を呼び出し、グラフィックスコンテキスト、オフセット値、およびブラー値を渡します。陰影付けが設定された後、描画するオブジェクトには、デバイスの RGB 色空間に 1/3 のアルファ値を持った黒色で描かれた陰影が付きます。つまり、{0、0、0、1.0/3.0} に設定された RGBA 値を使用して陰影が描画されます。


CGContextSetShadowWithColor 関数を呼び出して、グラフィックスコンテキスト、オフセット値、ブラー(blur) 値、および CGColor オブジェクトを渡して、色付き陰影を描くことができます。色に指定する値は、描画する色空間によって異なります。


CGContextSetShadow または CGContextSetShadowWithColor 関数を呼び出す前にグラフィックス状態を保存すると、グラフィックス状態を復元して陰影付けをオフにできます。陰影の色を NULL に設定することによって、陰影を無効にすることもできます。


コンテキストに基づいて変化する陰影描画規則


先に説明したオフセットは、陰影を投じたイメージに関連して影陰影の位置を指定します。これらのオフセットはコンテキストによって解釈され、影の位置を計算するために使用されます。


陰影を用いたペイント


陰影を用いてペイントするには、以下の手順に従って下さい。


  1. グラフィックス状態を保存します。
  2. CGContextSetShadow 関数を呼び出し、適切な値を渡します。
  3. 陰影を適用するすべての描画を実行します。
  4. グラフィックス状態を復元します。

色付きの陰影を用いてペイントするには、以下の手順に従って下さい。


  1. グラフィックス状態を保存します。
  2. CGColorSpace オブジェクトを作成して、Quartz が陰影の色値を正しく解釈するようにします。
  3. 使用する陰影の色を指定する CGColor オブジェクトを作成します。
  4. CGContextSetShadowWithColor 関数を呼び出し、適切な値を渡します。
  5. 陰影を適用するすべての描画を実行します。
  6. グラフィックス状態を復元します。

図 7-3 の 2 つの長方形は陰影付きで描画されています。1 つは色付きの影です。


リスト 7-1 の関数は、図 7-3 に示す長方形を描くように陰影を設定する方法を示しています。番号付きのコード行の詳細な説明は、リストの後に示します。


リスト 7-1 陰影を設定する関数


void MyDrawWithShadows (CGContextRef myContext, // 1
                         CGFloat wd, CGFloat ht);
{
    CGSize          myShadowOffset = CGSizeMake (-15,  20);// 2
    CGFloat           myColorValues[] = {1, 0, 0, .6};// 3
    CGColorRef      myColor;// 4
    CGColorSpaceRef myColorSpace;// 5
 
    CGContextSaveGState(myContext);// 6
 
    CGContextSetShadow (myContext, myShadowOffset, 5); // 7
    // Your drawing code here// 8
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3 + 75, ht/2 , wd/4, ht/4));
 
    myColorSpace = CGColorSpaceCreateDeviceRGB ();// 9
    myColor = CGColorCreate (myColorSpace, myColorValues);// 10
    CGContextSetShadowWithColor (myContext, myShadowOffset, 5, myColor);// 11
    // Your drawing code here// 12
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3-75,ht/2-100,wd/4,ht/4));
 
    CGColorRelease (myColor);// 13
    CGColorSpaceRelease (myColorSpace); // 14
 
    CGContextRestoreGState(myContext);// 15
}


コードの動作は以下の通りです。


  1. グラフィックスコンテキストと、長方形を構築するときに使用する幅と高さという 3 つのパラメータをとります。
  2. 陰影のオフセット値を含む CGSize オブジェクトを宣言して作成します。これらの値は、オブジェクトの左に 15 ユニット、オブジェクトの上に 20 ユニットの陰影オフセットを指定します。
  3. 色値の配列を宣言します。この例では RGBA を使用していますが、Quartz が値を正しく解釈するために必要な色空間と共に Quartz に渡されるまで、これらの値は意味をなさないでしょう。
  4. 色参照のための記憶域を宣言します。
  5. 色空間参照のための記憶域を宣言します。
  6. 後で復元できるように、現在のグラフィック状態を保存します。
  7. 陰影に、以前に宣言されたオフセット値を設定し、ブラー(blur) 値を 5 に設定し、これは柔らかい陰影の端を指示します。陰影は {0、0、0、1/3} の RGBA 値を持つ灰色で表示されます。
  8. 次の 2 行のコードは、図 7-3 の右側に長方形を描きます。これらの行を、あなた独自の図面コードで置き換えられます。
  9. デバイスの RGB 色空間を作成します。CGColor オブジェクトを作成するときは、色空間を指定する必要があります。
  10. 以前に宣言したデバイス RGB 色空間と RGBA 値を提供して、CGColor オブジェクトを作成します。このオブジェクトは陰影の色を指定し、この場合それはアルファ値 0.6 の赤です。
  11. 色付きの陰影を設定し、作成したばかりの赤色を指定します。陰影は以前に作成されたオフセットと、柔らかい陰影の端を示すブラー(blur) 値 5 を使用します。
  12. 次の 2 行のコードは、図 7-3 の左側に長方形を描きます。これらの行は、あなた独自の図面コードで置き換えられます。
  13. 色オブジェクトが不要になったため、そのオブジェクトを解放します。
  14. 色空間オブジェクトが不要になったため、そのオブジェクトを解放します。
  15. 陰影を設定する前の状態にグラフィック状態を復元します。

前の章 次の章



目次
Xcode 10 の新機能

  • 前書き
  • 誰がこの文書を読むべきか?
    この文書の構成
  • Quartz 2D の概要
  • ページ
    描画先:グラフィックスコンテキスト
    Quartz 2D 不透明(Opaque) データ型
    グラフィックス状態
    Quartz 2D 座標系
    メモリー管理:オブジェクトの所有権
  • グラフィックスコンテキスト
  • iOS のビューグラフィックスコンテキストに描画する
    Mac OS X でのウィンドウグラフィックスコンテキストの作成
    PDF グラフィックスコンテキストの作成
  • ビットマップグラフィックスコンテキストの作成
  • サポートされるピクセル形式
    アンチエイリアス
    印刷用のグラフィックスコンテキストの取得
  • パス
  • パスの作成とパスの描画
  • ビルディングブロック
  • パスの作成
  • パスのペイント (Painting a Path)
  • ブレンドモードの設定
  • パスをクリップする
  • 色と色空間
  • 色と色空間について
    アルファ値
    色空間の作成
    色の設定と作成
    レンダリングインテントの設定
  • 変換
  • Quartz 変換関数について
    現在の変換配列の変更
    アフィン変換の作成
    アフィン変換の評価
    ユーザをデバイス空間変換に導く
    配列の背後の数学
  • パターン
  • パターンの構造
    色付きパターンとステンシル(無色の) パターン
    タイル張り
    パターンの仕組み
  • 色付きパターンのペイント
  • ステンシルパターンのペイント
  • 陰影
  • 陰影の仕組み
    コンテキストに基づいて変化する陰影描画規則
    陰影を用いたペイント
  • グラデーション
  • 軸方向および放射状グラデーションの例
    CGShading と CGGradient オブジェクトの比較
    グラデーションの端を超えて色を拡張
    CGGradient オブジェクトの使用
  • CGShading オブジェクトの使用
  • CGShading オブジェクトを使用して軸方向のグラデーションをペイント
  • CGShading オブジェクトを使用して放射状グラデーションをペイント
  • 以下も見よ
  • 透過レイヤー
  • 透過レイヤーの仕組み
    透過レイヤーへのペイント
  • Quartz 2D でのデータ管理
  • Quartz 2D へのデータの移動
    Quartz 2D からのデータの移動
    Mac OS X で Quartz 2D と Core Image 間でデータを移動
  • ビットマップイメージとイメージマスク
  • ビットマップイメージとイメージマスクについて
    ビットマップイメージ情報
  • イメージの作成
  • イメージマスクの作成
  • イメージをマスクする
  • イメージにブレンドモードを使用
  • Core Graphics のレイヤー描画
  • レイヤー描画のしくみ
  • レイヤーを使った描画
  • 複数の CGLayer オブジェクトを使用して旗を描画する例
  • PDF 文書の作成、表示、および変換
  • PDF を開いて表示
    PDF ページの変換を作成する
    PDF ファイルの作成
    リンクの追加
    PDF コンテンツの保護
  • PDF 文書の解析
  • PDF 文書の構造の検査
  • PDF コンテンツの解析
  • PostScript 変換
  • 呼び出し関数を書く
    呼び出し関数構造体を埋める
    PostScript 変換オブジェクトの作成
    データプロバイダおよびデータコンシューマオブジェクトの作成
    変換の実行
    テキスト
    用語集
    文書改訂履歴












    トップ(Quartz 2D プログラミングガイド)












    トップ(Quartz 2D プログラミングガイド)