[ACCEPTED]-Get new x,y coordinates of a point in a rotated image-image-rotation
To calculate the position of a rotated point 2 you can use a rotation matrix.
Converted into JavaScript, this 1 calculates the rotated point:
function rotate(x, y, xm, ym, a) {
var cos = Math.cos,
sin = Math.sin,
a = a * Math.PI / 180, // Convert to radians because that is what
// JavaScript likes
// Subtract midpoints, so that midpoint is translated to origin
// and add it in the end again
xr = (x - xm) * cos(a) - (y - ym) * sin(a) + xm,
yr = (x - xm) * sin(a) + (y - ym) * cos(a) + ym;
return [xr, yr];
}
rotate(16, 32, 16, 16, 30); // [8, 29.856...]
The formula for rotations about 0,0 is:
x1 = cos(theta) x0 - sin(theta) y0
y1 = sin(theta) x0 + cos(theta) y0
But 16 that's for regular axes, and rotation about 15 0,0. The PIL rotation is clockwise with 14 "graphics" axes. Plus, it's around the 13 center of the image. The final confusing 12 thing is that the size of the image can 11 change, which needs to be accounted for 10 in the final result.
Procedure: take original 9 point, subtract off center of image, apply 8 "graphics axes" corrected rotation, find 7 new size of image, add back center position 6 of new image.
Rotation using graphics axes 5 is:
x1 = cos(theta) x0 + sin(theta) y0
y1 = -sin(theta) x0 + cos(theta) y0
16,32 - 16,16 is 0, 16. Rotate 30 degrees 4 clockwise rotation (based on your images) gives 3 a point cos(-30)*0+sin(-30)*16, -sin(-30)*0+cos(-30)*16 2 = -8, 13.86. The final step is adding back 1 the center position of the rotated position.
In an image, downwards is positive Y and 14 rightwards is positive X. However, to apply 13 the rotation formula, we need upwards as positive Y. Therefore, step 12 1 would be to apply f(x,y) = f(x,h-y), where 'h' is the height 11 of the image.
Let's say the image is rotated 10 with respect to x0,y0. You'd then need to 9 transform your origin to this point. Therefore, step 8 2 would be f(x,y) = f(x-x0,y-y0). At this stage (i.e. after the 7 two steps), your new co-ordinates would 6 be x-x0, h-y-y0. You're now ready to apply the rotation 5 formula
x1 = x*cos(theta) - y*sin(theta)
y1 = xsin(theta) + ycos(theta)
Use the values of x and y obtained 4 after step two. You'd get
x1 = (x-x0)*cos(theta) - (h-y-y0)*sin(theta)
y1 = (x-x0)*sin(theta) + (h-y-y0)*cos(theta)
Now, undo transformations 3 done in step 2 and step 1 (in that order).
After 2 undoing step2: xNew = x1 + x0 and yNew = y1 + y0
After undoing step1: xNew = x1 + x0 and 1 yNew = h - (y1 + y0)
This gives you:
xNew = (x-x0)*cos(theta) - (h-y-y0)*sin(theta) + x0
yNew = -(x-x0)*sin(theta) - (h-y-y0)*cos(theta) + (h-y0)
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.