次の方法で共有

変換の概要

  • [アーティクル]

このトピックでは、Direct2D 変換の基本について説明し、さまざまな変換の例を示します。 これには、次の部分が含まれています。

Direct2D 変換とは

変換は、ある座標空間から別の座標空間、または同じ座標空間内の別の位置にオブジェクトのポイントをマップする方法を指定します。 このマッピングは、次の表に示すように、FLOAT 値の 3 つの列を持つ 3 つの行のコレクションとして定義された変換マトリックスによって記述されます。

     
M11Default: 1.0 M12Default: 0.0 0.0
M21Default: 0.0 M22Default: 1.0 0.0
M31OffsetX: 0.0 M32OffsetY: 0.0 1.0

 

この行列では、M11、M12、M21、M22 の各メンバーが、オブジェクトをスケーリング、回転、または傾斜できる線形変換を定義します。OffsetX メンバーと OffsetY メンバーは、線形変換が行われた後に適用される変換を定義します。 アフィン変換の場合、3 番目の列の値は常に 0.0、0.0、1.0 です。

Direct2D ではアフィン (線形) 変換のみがサポートされているため、その変換行列は 3 by 2 行列として定義され、前の変換行列の 3 番目の列は省略されます。 次の表は、Direct2D 変換マトリックスのレイアウトを示しています。

   
M11Default: 1.0 M12Default: 0.0
M21Default: 0.0 M22Default: 1.0
M31OffsetX: 0.0 M32OffsetY: 0.0

 

Direct2D では、この 3 by 2 行列は D2D1_MATRIX_3X2 構造体で表されます。 一般的なマトリックス操作を簡略化するために、Direct2D には Matrix3x2F という名前のクラスも用意されています。これは、 D2D1_MATRIX_3X2 構造体から派生します。

Matrix3x2F の既定のコンストラクターでは、オブジェクトは初期化されません。 ID マトリックスを取得するには、 Matrix3x2F::Identity を使用します。

ID 変換をオブジェクトに適用しても、オブジェクトの位置、図形、またはサイズは変更されません。 数値に 1 を掛けても数値が変わらないのと似ています。 つまり、ID 変換はポイントの座標だけを残し、ポイントを新しい位置にシフトしません。 ID 変換以外の変換では、オブジェクトの位置、図形、サイズが変更されます。

変換はすべて座標に関するものであり、変換の使用を理解するために、Direct2D 座標空間を理解することが重要です。

Direct2D 座標空間

Direct2D では、左利きの座標空間が使用されます。つまり、正の x 軸の値は右に増加し、正の y 軸の値は下方向に増加します。 次の図に示すように、画面上のすべての位置は原点 (x 軸と y 軸が交差する点 (0、0) を基準にして配置されます。 Direct2D レンダー ターゲットでは、この座標空間が使用されます。

左手座標空間の x 軸と y 軸の図

変換マトリックス内の値を操作することで、オブジェクトの回転、スケーリング、スキュー、移動 (平行移動) を行うことができます。 たとえば、OffsetX を 100 に設定し、OffsetY を 200 に設定した場合、オブジェクトを右の 100 ピクセルに移動し、200 ピクセル下に移動します。

オブジェクト移動の効果を表示するには、変換変換を適用してターゲット、ブラシ、またはジオメトリをレンダリングする必要があります。 レンダー ターゲットに変換を適用すると画面全体に影響しますが、ブラシまたはジオメトリに変換を適用すると、その特定のブラシまたはジオメトリにのみ影響します。 変換行列を作成するには、 Matrix3x2F クラスを使用します。

変換マトリックスの作成

回転、スケール、スキュー、および変換変換を作成するために、 Matrix3x2F クラスは次の表に示す静的メソッドを提供します。 テーブルの [例] 列には、各変換方法の使用方法を示すハウツー トピックへのリンクが含まれています。

メソッド 説明 例 図
matrix3x2f::rotate は、指定された角度と中心点を持つ回転変換を作成します。 オブジェクトを回転させる方法 元の四角形の中心を中心に時計回りに 45 度回転した四角形の図
matrix3x2f::scale は、指定されたスケール ファクターと中心点を持つスケール変換を作成します。 オブジェクトをスケーリングする方法 130% にスケーリングされた四角形の図
matrix3x2f::skew は、指定された x 軸と y 軸の値と中心点を持つスキュー変換を作成します。 オブジェクトを傾斜させる方法 y 軸から反時計回りに 30 度傾斜した正方形の図
matrix3x2f::translation は変換変換を作成し、x 軸と y 軸の方向の変位を指定します。 オブジェクトを翻訳する方法 正の x 軸に沿って 20 単位、正の y 軸に沿って 10 単位移動した四角形の図

 

ターゲット変換のレンダリング

レンダー ターゲットは、 ID2D1RenderTarget インターフェイスから継承するリソースです。 描画用のリソースを作成し、実際の描画操作を実行します。 また、座標空間を変換するためのメソッドも提供します。 ID2D1RenderTarget::SetTransform メソッドを呼び出して、指定した変換をレンダー ターゲットに適用できます。 後続のすべての描画操作は、変換された空間で行われます。

コンテンツをレンダリングするには、レンダー ターゲットの描画メソッドを使用します。 描画を開始する前に、 BeginDraw メソッドを呼び出します。 コンテンツのレンダリングを完了するには、 EndDraw メソッドを呼び出します。 例については、「 オブジェクトに複数の変換を適用する方法」を参照してください。

ブラシ変換

SetTransform を呼び出すことで、ブラシの変換を調整できます。 この変換では、ブラシを大きな紙と考え、さまざまなレンダリング プリミティブ (テキスト、ジオメトリ、四角形など) をステンシルと考えることができます。 ブラシ変換を調整すると、ステンシル自体の位置を変更せずに、ステンシルの下にある大きな用紙をスライドしたかのように表示されます。 この手法を使用すると、テキストを黄色から黒にフェードして 3D 空間に消すことができます。

ブラシ変換が ID 変換の場合、ブラシは描画されるレンダー ターゲットと同じ座標空間に表示されます。 ブラシ変換を使用すると、呼び出し元はブラシ座標をこの空間にマップする方法を変更できます。

Direct2D では、ブラシスペースの指定方法が Windows Presentation Foundation (WPF) とは異なります。 Direct2D では、ブラシ空間は描画されるオブジェクトに対して相対的ではなく、レンダー ターゲットの現在の座標系であり、ブラシ変換によって変換されます (存在する場合)。 WPF で行われたようにブラシでオブジェクトを塗りつぶすには、ブラシ空間の原点をオブジェクトの境界ボックスの左上隅に変換し、基本タイルがオブジェクトの境界ボックスに塗りつぶされるようにブラシ空間をスケーリングする必要があります。

ブラシ変換の詳細については、「 Direct2D ブラシの概要」を参照してください。

ジオメトリ変換

ジオメトリのスケーリング、移動、移動、スキューを行う場合は、画面全体に影響を与えるレンダー ターゲット変換ではなく、特定のジオメトリに変換を直接適用できます。 レンダー ターゲット変換は、通常、ジオメトリのストロークと塗りつぶしに影響します。 これに対し、ジオメトリ変換はジオメトリの塗りつぶしにのみ影響します。これは、ストロークされる前に変換がジオメトリに適用されるためです。

注意

Windows 8以降、ストロークの種類をD2D1_STROKE_TRANSFORM_TYPE_FIXEDまたはD2D1_STROKE_TRANSFORM_TYPE_HAIRLINEに設定した場合、ワールド変換はストロークに影響しません。

 

ID2D1Factory::CreateTransformedGeometry を呼び出して ID2D1TransformedGeometry オブジェクトを作成することで、ジオメトリの変換を調整できます。 ジオメトリ変換の詳細については、「 Direct2D ジオメトリの概要」を参照してください。

レンダー ターゲット変換がクリップに与える影響

レンダー ターゲットの変換は、軸揃えクリップの境界ボックスの計算方法に影響します。 PushAxisAlignedClip が呼び出されると、clipRect パラメーターはレンダー ターゲットに設定されている現在のワールド変換によって変換されます。 変換が clipRect に適用されると、 clipRect の軸揃え境界ボックスが計算されます。 効率を高めるために、コンテンツは、渡された元の clipRect ではなく、この軸揃え境界ボックスにクリップされます。 次の図は、回転変換をレンダー ターゲット、結果の clipRect、および計算された軸揃え境界ボックスに適用する方法を示しています。

  1. 次の図の四角形は、画面のピクセルに揃えられたレンダー ターゲットであると仮定します。

    四角形の図 (レンダー ターゲット)

  2. レンダー ターゲットに回転変換を適用します。 次の図では、黒い四角形は元のレンダー ターゲットを表し、赤い破線の四角形は変換されたレンダー ターゲットを表しています。

    元の四角形と回転した四角形の図 (変換されたレンダー ターゲット)

  3. PushAxisAlignedClip が呼び出されると、回転変換が clipRect に適用されます。 次の図では、青い四角形は変換された clipRect を表しています。

    回転した四角形 (変換されたレンダー ターゲット) 内の小さい青い四角形 (クリップrect) の図

  4. 軸揃え境界ボックスが計算されます。 次の図では、緑色の破線の四角形が境界ボックスを表しています。 すべての内容は、この軸揃え境界ボックスにクリップされます。

    小さな青い四角形の緑の境界ボックスの図 (cliprect)

まとめ

Direct2D を使用すると、簡略化された座標空間と関連クラスを使用して 2 次元オブジェクトを簡単に変換できます。 さまざまな種類の変換を使用すると、オブジェクトの翻訳、回転、傾斜、スケーリングを行って、多くの印象的な視覚効果を実現できます。

Direct2D リファレンス