Take the 2-minute tour ×

With reference to this programming game I am currently building.

alt text

To translate a Canvas in WPF, I am using two Forms: TranslateTransform (to move it), and RotateTransform (to rotate it) [children of the same TransformationGroup]

I can easily get the top left x,y coordinates of a canvas when its not rotated (or rotated at 90deg, since it will be the same), but the problem I am facing is getting the top left (and the other 3 points) coordinates.

This is because when a RotateTransform is applied, the TranslateTransform's X and Y properties are not changed (and thus still indicate that the top-left of the square is like the dotted-square (from the image)

The Canvas is being rotated from its center, so that is its origin.

So how can I get the "new" x and y coordinates of the 4 points after a rotation?


alt text

I have found a way to find the top-left coordinates after a rotation (as you can see from the new image) by adding the OffsetX and OffsetY from the rotation to the starting X and Y coordinates.

But I'm now having trouble figuring out the rest of the coordinates (the other 3).

With this rotated shape, how can I figure out the x and y coordinates of the remaining 3 corners?


The points in the 2nd image ARE NOT ACCURATE AND EXACT POINTS. I made the points up with estimates in my head.

[UPDATE] Solution:

First of all, I would like to thank Jason S for that lengthy and Very informative post in which he describes the mathematics behind the whole process; I certainly learned a lot by reading your post and trying out the values.

But I have now found a code snippet (thanks to EugeneZ's mention of TransformBounds) that does exactly what I want:

public Rect GetBounds(FrameworkElement of, FrameworkElement from)
    // Might throw an exception if of and from are not in the same visual tree
    GeneralTransform transform = of.TransformToVisual(from);

    return transform.TransformBounds(new Rect(0, 0, of.ActualWidth, of.ActualHeight));

Reference: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/86350f19-6457-470e-bde9-66e8970f7059/

share|improve this question
Here you can find easiest find way stackoverflow.com/a/22511805/2106820 –  Arfan Mirza Mar 19 at 16:14

5 Answers 5

up vote 11 down vote accepted

If I understand your question right:

shape has corner (x1,y1), center (xc,yc)
rotated shape has corner (x1',y1') after being rotated about center

how to map any point of the shape (x,y) -> (x',y') by that same rotation

Here's the relevant equations:

(x'-xc) = Kc*(x-xc) - Ks*(y-yc)
(y'-yc) = Ks*(x-xc) + Kc*(y-yc)

where Kc=cos(theta) and Ks=sin(theta) and theta is the angle of counterclockwise rotation. (to verify: if theta=0 this leaves the coordinates unchanged, otherwise if xc=yc=0, it maps (1,0) to (cos(theta),sin(theta)) and (0,1) to (-sin(theta), cos(theta)) . Caveat: this is for coordinate systems where (x,y)=(1,1) is in the upper right quadrant. For yours where it's in the lower right quadrant, theta would be the angle of clockwise rotation rather than counterclockwise rotation.)

If you know the coordinates of your rectangle aligned with the x-y axes, xc would just be the average of the two x-coordinates and yc would just be the average of the two y-coordinates. (in your situation, it's xc=75,yc=85.)

If you know theta, you now have enough information to calculate the new coordinates. If you don't know theta, you can solve for Kc, Ks. Here's the relevant calculations for your example:

(62-75) = Kc*(50-75) - Ks*(50-85)
(40-85) = Ks*(50-75) + Kc*(50-85)

-13 = -25*Kc + 35*Ks = -25*Kc + 35*Ks
-45 = -25*Ks - 35*Kc = -35*Kc - 25*Ks

which is a system of linear equations that can be solved (exercise for the reader: in MATLAB it's:

[-25 35;-35 -25]\[-13;-45]

to yield, in this case, Kc=1.027, Ks=0.3622 which does NOT make sense (K2 = Kc2 + Ks2 is supposed to equal 1 for a pure rotation; in this case it's K = 1.089) so it's not a pure rotation about the rectangle center, which is what your drawing indicates. Nor does it seem to be a pure rotation about the origin. To check, compare distances from the center of rotation before and after the rotation using the Pythagorean theorem, d2 = deltax2 + deltay2. (for rotation about xc=75,yc=85, distance before is 43.01, distance after is 46.84, the ratio is K=1.089; for rotation about the origin, distance before is 70.71, distance after is 73.78, ratio is 1.043. I could believe ratios of 1.01 or less would arise from coordinate rounding to integers, but this is clearly larger than a roundoff error)

So there's some missing information here. How did you get the numbers (62,40)?

That's the basic gist of the math behind rotations, however.

edit: aha, I didn't realize they were estimates. (pretty close to being realistic, though!)

share|improve this answer
I got those numbers by adding the starting X and Y coordinates to the OffsetX and OffsetY retrieved from the Rotation Matrix. Thus, if the OffsetX is 12, and the "unrotated" shape's X is 50, the new X (after rotation) is 62. Same goes for the Y coordinate –  Andreas Grech Feb 26 '09 at 15:46
Btw, just to clarify: The points I put in the image are not real points, and not even the offsets are real; I just made them up for the image –  Andreas Grech Feb 26 '09 at 16:02
I think the values are a rough estimate, he showed the illustration as an example. –  Drahcir Feb 26 '09 at 16:04
Oh, ok. That's a pretty good estimate, then; you maintained the radius about the center within 10% of its pre-rotation value. :) –  Jason S Feb 26 '09 at 16:38

I use this method:

Point newPoint = rotateTransform.Transform(new Point(oldX, oldY));

where rotateTransform is the instance on which I work and set Angle...etc.

share|improve this answer

I'm not sure, but is this what you're looking for - rotation of a point in Cartesian coordinate system: link

share|improve this answer
Will have a look at it. Thanks. –  Andreas Grech Feb 24 '09 at 14:06

Look at GeneralTransform.TransformBounds() method.

share|improve this answer

You can use Transform.Transform() method on your Point with the same transformations to get a new point to which these transformations were applied.

share|improve this answer
Transform() accepts a Point variable. What should be the x and y of that Point ? –  Andreas Grech Feb 24 '09 at 15:44
Left and Top of your canvas –  Alan Mendelevich Feb 24 '09 at 15:44
In reference to your updated question Transform() method will do exactly what you need with any point (including other corners of your square). –  Alan Mendelevich Feb 26 '09 at 15:44
"You can use Transform.Transform()" <- What is 'Transform.' ? As in, on what object are you invoking the method on? –  Andreas Grech Feb 26 '09 at 18:42
Use the same Transform as you have applied to your object (i.e. in this case use your TransformGroup instance that has the rotate and translate transforms) –  Dave Feb 27 '09 at 4:40

Your Answer


