Compartir a través de


Cómo sesgar un objeto

Para sesgar (o escalar) un objeto significa distorsionar un objeto por un ángulo especificado del eje x, el eje Y o ambos. Por ejemplo, al sesgar un cuadrado, se convierte en un paralelogramo.

El método Matrix3x2F::Skew toma tres parámetros:

  • angleX: ángulo de asimetría del eje x, que se mide en grados en sentido contrario a las agujas del reloj desde el eje Y.
  • angleY: ángulo de asimetría del eje Y, que se mide en grados en el sentido de las agujas del reloj desde el eje X.
  • centerPoint: punto sobre el que se realiza la asimetría.

Para predecir el efecto de una transformación de asimetría, considere que angleX es el ángulo de asimetría medido en grados en sentido contrario a las agujas del reloj desde el eje Y. Por ejemplo, si angleX se establece en 30, el objeto sesga 30 grados en sentido contrario a las agujas del reloj a lo largo del eje Y sobre centerPoint. En la ilustración siguiente se muestra un cuadrado sesgado horizontalmente de 30 grados sobre la esquina superior izquierda del cuadrado.

illustration of a square skewed 30 degrees counterclockwise from the y-axis

Del mismo modo, angleY es un ángulo de asimetría medido en grados en el sentido de las agujas del reloj desde el eje X. Por ejemplo, si angleY se establece en 30, el objeto sesga 30 grados en el sentido de las agujas del reloj a lo largo del eje X sobre centerPoint. En la ilustración siguiente se muestra un cuadrado sesgado verticalmente 30 grados sobre la esquina superior izquierda del cuadrado.

illustration of a square skewed 30 degrees clockwise from the x-axis

Si establece angleX y angleY en 30 grados y el centerPoint en la esquina superior izquierda del cuadrado, verá el siguiente cuadrado sesgado (contorno sólido). Observe que el cuadrado sesgado está sesgado 30 grados en sentido contrario a las agujas del reloj desde el eje Y y 30 grados en el sentido de las agujas del reloj desde el eje X.

illustration of a square skewed 30 degrees counterclockwise from the y-axis and 30 degrees clockwise from the x-axis

En el ejemplo de código siguiente sesga el cuadrado de 45 grados horizontalmente sobre la esquina superior izquierda del cuadrado.

    // 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);

En la ilustración siguiente se muestra el efecto de aplicar la transformación de sesgo al cuadrado, donde el cuadrado original es un contorno punteado y el objeto sesgado (paralelograma) es un contorno sólido. Observe que el ángulo de asimetría es de 45 grados en sentido contrario a las agujas del reloj del eje Y.

illustration of a square skewed 45 degrees counterclockwise from the y-axis

Introducción a las transformaciones de Direct2D

Referencia de Direct2D