question

CMamba-0853 avatar image
0 Votes"
CMamba-0853 asked CMamba-0853 commented

UWP CanvasBitmap rotation by code

Im trying to rotate a canvas bitmap on a draw session. I haven't been able to do this. When I tried it looks like the entire Win2D canvas rotates and not just the canvas bitmap.
I tried this and it didnt work:
session.Transform *= Matrix3x2.CreateRotation((float)Math.PI / 2, new Vector2(200))

                private void Draw(CanvasDrawingSession session, CanvasBitmap canvasImage, float xValue, float yValue, float rotationDegrees)
                 {
        
                     session.Transform = Matrix3x2.CreateScale(1);

                     session.DrawImage(canvasImage, xValue, yValue);
                 }


windows-uwp
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

AryaDing-MSFT avatar image
0 Votes"
AryaDing-MSFT answered CMamba-0853 commented

Hi,

Welcome to Microsoft Q&A!

The reason is that you rotated the image 360 degrees, so it stays the same.

The parameter radians of Matrix3x2.CreateRotation(float radians, Vector2 centerPoint) method represents the amount of rotation in radians. It seems that you want to use angle as parameter and used a Conversion formula. The Conversion formula from angles to radians is: angle*Math.PI/180, you used Math.PI / 2, which indicates you rotate 360 degrees.

So you could refer the following code to solve this issue.

 //angle varible indicates the angle you want to rotate.
 session.Transform = Matrix3x2.CreateRotation((float)Math.PI / 180*angle, new Vector2(200));

Update:
If you want to rotate and translate the image, I suggest you use Matrix3x2.Multiply(Matrix3x2 value1, Matrix3x2 value2) method to combine the transformation. As follows:

 // translate first, then rotate
 session.Transform = Matrix3x2.Multiply(Matrix3x2.CreateTranslation(100,100), Matrix3x2.CreateRotation((float)Math.PI / 180 * 90,new Vector2(100,100))); 


 // Rotate first, then translate
 session.Transform = Matrix3x2.Multiply( Matrix3x2.CreateRotation((float)Math.PI / 180 * 90), Matrix3x2.CreateTranslation(100, 100));

The above code makes the image rotate 90 degrees and translate 100 at X and Y. You need to notice that the order of transformation will cause the difference of code. As you can see, if you translate first then rotate, you need to set the center point of rotation to (offsetX,offsetY). The key point is the center point of rotation, when you rotate an image, please notice its difference at different situations.




If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thanks it does help.

My only issue now is when I rotate the image it obviously affects the direction when I try move it. How would I keep the direction as far as X and Y consistent and ignore the angle the object is facing when I try move it ?

Im moving the image via X and Y
session.DrawImage(canvasImage, x, y);

0 Votes 0 ·

@CMamba-0853 I have updated my answer, please check it.

0 Votes 0 ·

Thanks for the help, unfortunately this doesn't work for me. Im simply trying to make an image of a round object rotate in different directions when there are collisions. Ill just use a sprite sheet for it. The rotation needs to be completely independent of the physical movement, like you can do in Unity. Clearly Win2D and UWP works differently. Will stick with the animation option instead. Thanks.

0 Votes 0 ·