UWP CanvasBitmap rotation by code

Question

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

Answer 1

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.