透過レイヤー


透過レイヤー は、合成グラフィックスを生成するために結合された 2 つ以上のオブジェクトで構成されます。結果の合成物は単一のオブジェクトとして扱われます。透過レイヤーは、図 9-1 の 3 つの円に適用される影など、オブジェクトのグループに効果を適用する場合に便利です。


図 9-1 の 3 つの円に、最初に透過レイヤーを描画せずに影を適用すると、図 9-2 のような結果が得られます。



透過レイヤーの仕組み


Quartz の透過レイヤーは、多くの一般的なグラフィックスアプリケーションで使用可能なレイヤーに似ています。レイヤーは独立した実体です。Quartz は各コンテキストの透過レイヤースタックを保持し、透過レイヤーはネストできます。しかし、レイヤーは常にスタックの一部であるため、それらを独立して操作することはできません。


CGContextBeginTransparencyLayer 関数を呼び出すことで、透過レイヤーの開始を知らせます。この関数は、グラフィックスコンテキストと CFDictionary オブジェクトをパラメータとして取ります。この dictionary では、レイヤーに関する追加情報を指定するオプションを提供できますが、dictionary が Quartz 2D API でまだ使用されていないため、NULL を渡します。この呼び出しの後、アルファ値(1 に設定されます)、陰影(オフにされます)、ブレンドモード(normal に設定されます)、および最終の合成に影響を与える他のパラメータを除いて、グラフィックス状態パラメータは変更されないままです。


透過レイヤーを開始したら、そのレイヤーに表示したいすべての描画を実行して下さい。指定されたコンテキストでの描画操作は、完全に透明な背景に合成されて描画されます。この背景は、コンテキストとは別の宛先バッファとして扱われます。


描画が終了したら、CGContextEndTransparencyLayer 関数を呼び出して下さい。Quartz は、グローバルのアルファ値とコンテキストの陰影状態を使用し、またコンテキストのクリッピング領域を注意し、コンテキストに結果を合成します。


透過レイヤーへのペイント


透過レイヤーにペイントするには、以下の 3 つの手順が必要です。

  1. 関数 CGContextBeginTransparencyLayer を呼び出します。
  2. 合成したいアイテムを透過レイヤーに描画します。
  3. 関数 CGContextEndTransparencyLayer を呼び出します。

図 9-3 の 3 つの長方形は透過レイヤーにペイントされています。Quartz は、長方形が単一のユニットであるかのように影をレンダリングします。


リスト 9-1 の関数は、図 9-3 の長方形を生成するために透過レイヤーを使用する方法を示しています。コードの各行の詳細な説明は、リストの後に示します。


リスト 9-1 透過レイヤーへのペイント


void MyDrawTransparencyLayer (CGContext myContext, // 1
                                CGFloat wd,
                                CGFloat ht)
{
    CGSize          myShadowOffset = CGSizeMake (10, -20);// 2
 
    CGContextSetShadow (myContext, myShadowOffset, 10);   // 3
    CGContextBeginTransparencyLayer (myContext, NULL);// 4
    // Your drawing code here// 5
    CGContextSetRGBFillColor (myContext, 0, 1, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3+ 50,ht/2 ,wd/4,ht/4));
    CGContextSetRGBFillColor (myContext, 0, 0, 1, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3-50,ht/2-100,wd/4,ht/4));
    CGContextSetRGBFillColor (myContext, 1, 0, 0, 1);
    CGContextFillRect (myContext, CGRectMake (wd/3,ht/2-50,wd/4,ht/4));
    CGContextEndTransparencyLayer (myContext);// 6
}


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


  1. グラフィックスコンテキストと、長方形を構築するときに使用する幅と高さという 3 つのパラメータをとります。
  2. 陰影の x および y オフセット値を含む CGSize データ構造体を設定します。この陰影は、水平方向に 10 ユニット、垂直方向に -20 ユニットオフセットされています。
  3. 陰影を設定し、ブラー(blur) 値として 10 の値を指定します。(0 の値は、ぼかし(blur) のない硬い端の陰影を指定します。)
  4. 透過レイヤーの開始を通知します。この時点から、このレイヤーに描画が行われます。
  5. 次の 6 行のコードが 図 9-3 に示した 3 色の長方形を塗りつぶし、塗りつぶし色を設定します。これらの行は、独自の描画コードで置き換えられます。
  6. 透過レイヤーの終わりを通知し、Quartz が結果をコンテキストに合成すべきことを通知します。

前の章 次の章



目次
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 プログラミングガイド)