オブジェクトを傾斜させる方法

オブジェクトを傾斜 (またはせん断) するには、x 軸、y 軸、またはその両方から指定した角度だけオブジェクトを歪めます。 たとえば、正方形を傾けると平行四辺形になります。

Matrix3x2F::Skew メソッドは、次の 3 つのパラメーターを受け取ります。

  • angleX: x 軸の傾斜角度。y 軸から反時計回りに度単位で測定されます。
  • angleY: x 軸から時計回りに度単位で測定される y 軸の傾斜角度。
  • centerPoint: スキューが実行されるポイント。

スキュー変換の効果を予測するには、 angleX が y 軸から反時計回りに度単位で測定される傾斜角度であると考えてください。 たとえば、 angleX が 30 に設定されている場合、オブジェクトは 中心点を中心とする y 軸に沿って反時計回りに 30 度傾斜します。 次の図は、正方形の左上隅を 30 度水平方向に傾斜させた四角形を示しています。

y 軸から反時計回りに 30 度傾斜した正方形の図

同様に、 angleY は、x 軸から時計回りに度単位で測定される傾斜角度です。 たとえば、 angleY が 30 に設定されている場合、オブジェクトは 中心点を中心とする x 軸に沿って時計回りに 30 度傾斜します。 次の図は、正方形の左上隅を約 30 度垂直方向に傾斜した四角形を示しています。

x 軸から時計回りに 30 度傾斜した四角形の図

angleXangleY の両方を 30 度に設定し、centerPoint を四角形の左上隅に設定すると、次の傾斜した四角形 (実線の輪郭) が表示されます。 傾斜した四角形は、y 軸から反時計回りに 30 度、x 軸から時計回りに 30 度傾斜していることに注意してください。

y 軸から反時計回りに 30 度、x 軸から時計回りに 30 度傾斜した四角形の図

次のコード例では、正方形の左上隅を 45 度水平方向に傾斜させます。

    // Create a rectangle.
    D2D1_RECT_F rectangle = D2D1::Rect(126.0f, 301.5f, 186.0f, 361.5f);

    // Draw the outline of the rectangle.
    m_pRenderTarget->DrawRectangle(
        rectangle,
        m_pOriginalShapeBrush,
        1.0f,
        m_pStrokeStyleDash
        );

    // Apply the skew transform to the render target.
    m_pRenderTarget->SetTransform(
        D2D1::Matrix3x2F::Skew(
            45.0f,
            0.0f,
            D2D1::Point2F(126.0f, 301.5f))
        );

    // Paint the interior of the rectangle.
    m_pRenderTarget->FillRectangle(rectangle, m_pFillBrush);

    // Draw the outline of the rectangle.
    m_pRenderTarget->DrawRectangle(rectangle, m_pTransformedShapeBrush);

次の図は、正方形にスキュー変換を適用する効果を示しています。元の四角形は点線で、傾斜オブジェクト (平行四辺形) は実線です。 傾斜角度は y 軸から反時計回りに 45 度であることに注意してください。

y 軸から反時計回りに 45 度傾斜した正方形の図

Direct2D 変換の概要

Direct2D リファレンス