1

I have rotated an image and need to get the new coordinates of a smaller image to be placed on the rotated image.

Assuming the small image's coordinates on the unrotated large image are:

$x0 = 100;
$x1 = 120;
$y0 = 100;
$y2 = 200;

And the clockwise rotation performed on the large image is:

$rotation = -3.5;

How can I now get the updated coordinates for placing the small image onto the larger (now rotated) image?

(Disclaimer: This question is specifically how to calculate the new coordinates in PHP after a rotate of an image, so it is not a duplicate of other "coordinates after rotate" questions, which don't deal with how to solve this problem in PHP code, with 0,0 being top left corner and using PHP functions.)

Alasdair
  • 13,348
  • 18
  • 82
  • 138

1 Answers1

1

You need to know the Origin point where the image is rotated about. Then you can take any point in the old coordinate system (your big unrotated image) and translate it to the new coordinate system (your big rotated image) by doing the following steps:

  • Substract Origin from the small Image coordinates (smallIMageX - originX, smallImageY - originY)
  • Rotate sthe small image in the same way as you did with the large image
  • add the Origin point again on the small Image coordinates (smallRotatedImageX + originX, smallRotatedImageY + originY)

Then the small image will be rotated and placed where it was before.

I had that problem before in HTML Canvas. Please see the first answer on this question: Rotating a point about another point (2D)

That one describes a method how to do that in detail.

Community
  • 1
  • 1
Chris
  • 7,675
  • 8
  • 51
  • 101
  • Since I'm rotating externally using exactimage, I would assume it is rotated around the center. So I take the width/2 and height/2 of the small image before and after the rotate, and add the difference to the x & y? – Alasdair Dec 21 '11 at 08:05
  • 1
    Then your Origin point is the center of your old image or bigIMageX + bigIMageWidth/2 , bigImageY + bigImageHeight/2 – Chris Dec 21 '11 at 08:07
  • Easier than I thought! Thanks! – Alasdair Dec 21 '11 at 08:09
  • Actually I'm still confused. Say if the small image were 1,1 in exactly the center of the large image, then the coordinates would not move at all. Whereas if it were on the edge then the coordinates would move more. But this method doesn't appear to do that. – Alasdair Dec 21 '11 at 08:23
  • Yes thats correct. Please standby for a second i'll draw an image :-) – Chris Dec 21 '11 at 08:25
  • Sorry can't draw an image... but what you said is actually right. If the point you want to rotate lies exactly IN the origin, the coordinates will not change at all. If it lies at the edge of the coordinate system the change will be the maximum possible change. – Chris Dec 21 '11 at 08:38
  • OK, I was confused because you didn't use the reference to cos & sine as in the post you linked to. Because I rotated the image externally, I'm not rotating it in the same way. I understand better now. I'll just test it out. – Alasdair Dec 21 '11 at 08:44
  • Is this clockwise or anticlockwise? And does it work for negative values to rotate the other direction? – Alasdair Dec 21 '11 at 08:45
  • This really depends on PHP. I don't know much PHP so i can't tell. If PHP rotates anticlockwise using negative numbers it will work. (The sin and cos thing is also programming language related.) If you tell PHP to rotate your image in degrece you don't need this! – Chris Dec 21 '11 at 08:47
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/6032/discussion-between-chris-and-alasdair) – Chris Dec 21 '11 at 08:50