Comment incliner un objet

Pour incliner (ou cisailler) un objet signifie qu’il doit déformer un objet d’un angle spécifié par rapport à l’axe des x, à l’axe des y ou aux deux. Par exemple, lorsque vous inclinez un carré, il devient un parallélogramme.

La méthode Matrix3x2F :: skew utilise 3 paramètres :

  • AngleX: angle d’inclinaison de l’axe x, mesuré en degrés dans le sens inverse des aiguilles d’une position à partir de l’axe y.
  • AngleY: angle d’inclinaison de l’axe y, mesuré en degrés dans le sens des aiguilles d’une montre à partir de l’axe x.
  • centerPoint: point sur lequel l’inclinaison est exécutée.

Pour prédire l’effet d’une transformation d’inclinaison, prenez en compte que AngleX est l’angle d’inclinaison mesuré en degrés dans le sens inverse des aiguilles d’une position à partir de l’axe y. Par exemple, si AngleX a la valeur 30, l’objet passe à 30 degrés dans le sens inverse des aiguilles d’une montre sur l’axe y du centerPoint. L’illustration suivante montre un décalage carré horizontal de 30 degrés par-dessus le coin supérieur gauche du carré.

illustration d’un carré incliné de 30 degrés dans le sens inverse des aiguilles d’une montre à partir de l’axe y

De même, AngleY est un angle d’inclinaison mesuré en degrés dans le sens des aiguilles d’une montre à partir de l’axe x. Par exemple, si AngleY est défini sur 30, l’objet passe à 30 degrés dans le sens horaire le long de l’axe x à propos du centerPoint. L’illustration suivante montre un décalage carré vertical de 30 degrés par-dessus le coin supérieur gauche du carré.

illustration d’un carré incliné 30 degrés dans le sens des aiguilles d’une montre à partir de l’axe x

Si vous définissez à la fois AngleX et AngleY sur 30 degrés, et centerPoint sur l’angle supérieur gauche du carré, vous verrez le carré incliné suivant (entouré d’une forme unie). Notez que le carré incliné est incliné de 30 degrés dans le sens inverse des aiguilles d’une montre à partir de l’axe y et de 30 degrés dans le sens des aiguilles d’une montre à partir de l’axe x.

illustration d’un carré incliné de 30 degrés dans le sens inverse des aiguilles d’une montre à partir de l’axe y et de 30 degrés dans le sens horaire à partir de l’axe x

L’exemple de code suivant incline le carré de 45 degrés horizontalement autour de l’angle supérieur gauche du carré.

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

L’illustration suivante montre l’effet de l’application de la transformation d’inclinaison au carré, où le carré d’origine est un contour en pointillés et l’objet incliné (parallélogramme) est un contour solide. Notez que l’angle d’inclinaison est de 45 degrés dans le sens inverse des aiguilles d’une position à partir de l’axe y.

illustration d’un carré incliné de 45 degrés dans le sens inverse des aiguilles d’une montre à partir de l’axe y

Vue d’ensemble des transformations Direct2D

Référence Direct2D