Comment faire pivoter un rectangle dans Win2D ?

Question

Je cherche un moyen de faire pivoter une image rectangulaire (ou n'importe quelle image d'ailleurs) autour de son point central à l'aide de Win2D.

Cet extrait se trouve dans la méthode OnDraw du canevas Win2D :

var redBitMap = _images[1];
var yellowBitMap = _images[2];

var rect = new Rect(topLeft.X, topLeft.Y, _width, _height);
_drawingSession.DrawImage(redBitMap, rect);

ICanvasImage image = new Transform2DEffect
{
   Source = yellowBitMap,
   TransformMatrix = Matrix3x2.CreateRotation((float)(60 * Math.PI / 180)),
};
var sourceRect = image.GetBounds(_drawingSession);
_drawingSession.DrawImage(image, rect), sourceRect, 1, CanvasImageInterpolation.HighQualityCubic);

Cette méthode me donne une image tournée de 60 degrés, mais l'image est dessinée aux mauvaises coordonnées, de travers et plus petite que l'image prévue.

Il est intéressant de noter que si je modifie la taille du rectangle pour qu'il soit carré (la hauteur étant identique à la largeur), l'image n'est plus déformée.

Après y avoir réfléchi, voici ce qui se passe :

Ainsi, le rectangle jaune représente l'image que je veux faire pivoter (au centre) de 60 degrés. Le rectangle rouge qui est ancré dans le coin supérieur gauche représente ce qui se passe lorsque je la fais pivoter. La grande boîte bleue est le nouveau rectangle créé qui est déterminé par l'instruction image.GetBounds.

Lorsque j'essaie de ramener l'image aux coordonnées d'origine, vous pouvez voir sur l'image de droite que l'image est à la fois déformée et rétrécie parce que le rectangle source n'a plus la même taille ou forme que le rectangle cible.

Si mes compétences en géométrie étaient meilleures, je pourrais sûrement calculer les limites du nouveau rectangle et les appliquer à l'emplacement correct sur la toile. Mais hélas, cela fait trop longtemps que je n'ai plus fait de maths au lycée. Pour un calcul ponctuel, je suis sûr que je pourrais y arriver, mais pas lorsque la forme de l'image source est susceptible de changer.

Answer 1

Voici l'indice :

        var scaleFactor = rect.Height / rect.Width;

        ICanvasImage image2 = new ScaleEffect
        {
            Source = image,
            Scale = new Vector2((float)scaleFactor, 1)
        };

        args.DrawingSession.DrawImage(image2, rect, sourceRect, 1, CanvasImageInterpolation.HighQualityCubic);

Collez ce code à la place de votre dernière ligne. J'espère que vous obtiendrez ce que vous voulez :)

La mise à l'échelle se produit (ressemble à une inclinaison) lorsque vous essayez de dessiner un rectangle dans un autre avec des rapports d'aspect différents.

Answer 2

Jet, votre suggestion m'a aidé à trouver la réponse. Ce que je devais faire, c'était de ne pas utiliser le ScaleEffect, mais c'est ce qui m'a donné l'indice dont j'avais besoin. L'image dessinée finale devait prendre en compte le changement de taille (c'est à peu près la même idée que le ScaleEffect. Cela m'a laissé avec la ligne de code suivante :

args.DrawingSession.DrawImage(image, new Rect(topLeft.X + (_width - sourceRect.Width)/2, topLeft.Y + (_height - sourceRect.Height)/2, sourceRect.Width, sourceRect.Height), sourceRect, 1, CanvasImageInterpolation.HighQualityCubic)