how can i calculate top-left, bottom-left, top-right, bottom-right pixel positions of a div after you have set a rotation radian/degree on it?
An example would be helpful.
how can i calculate top-left, bottom-left, top-right, bottom-right pixel positions of a div after you have set a rotation radian/degree on it?
An example would be helpful.
Share Improve this question edited Apr 13, 2015 at 12:18 GibboK 73.9k147 gold badges451 silver badges672 bronze badges asked Jul 18, 2014 at 10:47 RaskolnikoovRaskolnikoov 55711 silver badges27 bronze badges 5- you can't calculate the corners unless you know what the center of rotation was. – Alnitak Commented Jul 18, 2014 at 10:50
- Could you build a use case (in jsfiddle or other) so we can identify your exact aim – web-tiki Commented Jul 18, 2014 at 11:05
- 4 The answer you have accepted is pletely incorrect. – Alnitak Commented Jul 18, 2014 at 14:14
- Are you still sure the answer you have accepted is correct? Did it work for you? – John Dvorak Commented Jul 22, 2014 at 10:24
- I've updated my accepted answer to my own solution I got worked out. This works for me and return correct results. – Raskolnikoov Commented Jul 23, 2014 at 22:51
3 Answers
Reset to default 12Assuming rotation relative to the center and coordinates of the four corners also relative to that same origin, each point (±a, ±b) where a and b are the half-width and half-height of the div needs to be multiplied by the transformation matrix:
| cos(theta) -sin(theta) |
| sin(theta) cos(theta) |
e.g.:
x' = a * cos(theta) - b * sin(theta)
y' = a * sin(theta) + b * cos(theta)
NB: the above is for cartesian coordinates - invert the theta terms as necessary for DOM coordinates where the y axis runs downwards.
I was confused about the answers here. The down-voted answer is definitely wrong but I also struggled with the other answer because it's a very good but very pure hint. The example there is still very theoretical for a usual web developer. So I bined both answers and made a working version of the down-voted example. So for those who also search for a working javascript solution. Here it is:
function getPixelsByAngle(x, y, width, height, angle) {
var radians = angle * Math.PI / 180;
return [
//upper left
[x + width/2 + width/-2 * Math.cos(radians) - height/-2 * Math.sin(radians), y + height/2 + width/-2 * Math.sin(radians) + height/-2 * Math.cos(radians)],
//upper right
[x + width/2 + width/2 * Math.cos(radians) - height/-2 * Math.sin(radians), y + height/2 + width/2 * Math.sin(radians) + height/-2 * Math.cos(radians)],
//bottom right
[x + width/2 + width/2 * Math.cos(radians) - height/2 * Math.sin(radians), y + height/2 + width/2 * Math.sin(radians) + height/2 * Math.cos(radians)],
//bottom left
[x + width/2 + width/-2 * Math.cos(radians) - height/2 * Math.sin(radians), y + height/2 + width/-2 * Math.sin(radians) + height/2 * Math.cos(radians)],
];
}
This solved my issue with calculating new pixel positions after rotating. I created a function to be used, passing in the x/y position, half width/height of the div and the new rotation angle.
function getPixelsByAngle(x,y,halfWidth,halfHeight,angle){
var bounds = [
//upper left
[x + (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight],
//upper right
[x - (halfWidth) * Math.cos(angle) - (halfHeight) * Math.sin(angle) + halfWidth, y + (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
//bottom right
[x - (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) - (halfWidth) * Math.sin(angle) + halfHeight],
//bottom left
[x + (halfWidth) * Math.cos(angle) + (halfHeight) * Math.sin(angle) + halfWidth, y - (halfHeight) * Math.cos(angle) + (halfWidth) * Math.sin(angle) + halfHeight]
];
return bounds;
}