I have this square div in the page. I need to get the $x,y$ coords (left/top) of the box based on rotation 0 even when the box is rotated at a different angle. Is there a formula to calculate the the $x,y$ coords of a square with rotation angle of $0$.

Here is a demo - http://jsfiddle.net/blessenm/XrVTp/

You can see the rectangle is rotated to $22$ degree. And I get the value $'x: 208, y: 234'$. Where $x$ is bottom left corner and $y$ is top left corner.

If the angle is at a rotation $0$. The value I get is $'x: 208, y: 234'$. This exactly what want irrespective of the rotation.

I know this question has a bit programming but I think strong math people might be able to solve it.

Btw, I get can get the following values as input.

  1. The distance between the left most point in the rotated rect and the left of the container.
  2. The distance between the top most point in the rotated rect and the top of the container.
  3. The distance between the right most point in the rotated rect and the left of the container.
  4. The distance between the bottom most point in the rotated rect and the top of the container.
  5. Angle of rotation
  • $\begingroup$ What are the dimensions of the red square? Are they constant? $\endgroup$ – Adriano May 28 '13 at 8:11
  • $\begingroup$ Ya they are constant. And I will know that before hand. It will be like 128 $\endgroup$ – blessenm May 28 '13 at 9:32

Note that the centre of the red square will not change when rotated. So we can find its coordinates first (by taking averages), then figure out the top left corner (based off the fact that the size of the red square is given beforehand; in this case, it was $256\times 256$). Here's a simple implementation:

document.querySelectorAll('input')[0].addEventListener('click',function() {
var left = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().left),
    right = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().right),
    top = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().top),
    bottom = Math.round(document.querySelectorAll('#knob')[0].getBoundingClientRect().bottom),
    x_mid = (left+right)/2.0,
    y_mid = (top+bottom)/2.0,
    x = x_mid - 256/2, // Subtract by half the knob's width.
    y = y_mid - 256/2  // Subtract by half the knob's height.
alert('left: '+left+', right: '+right+', top: '+top+', bottom: '+bottom+'\n'
      +'centre: ('+x_mid+', '+y_mid+')\n'
      +'x: '+x+', y: '+y);

//Alerts x: 208, y: 234 when angle is 0. Need to get this value all the time irrespective of the rotation.
  • $\begingroup$ I was just working on the same implementation. This worked. Thank you very much. I asked the same question at stackoverflow. If you put your answer, Ill accept it. stackoverflow.com/questions/16783154/… $\endgroup$ – blessenm May 28 '13 at 10:29
  • $\begingroup$ @blessenm No problem. =] $\endgroup$ – Adriano May 28 '13 at 10:33

You can use rotation matrix $$R(\theta) = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix},$$ which rotates vector $\begin{bmatrix} x \\ y \\ \end{bmatrix}$ (counterclockwise if $\theta>0,$ and clockwise if $\theta<0$) around the center of rotation $(0,\ 0)$ by angle $\theta:$ $$\begin{bmatrix} x' \\ y' \\ \end{bmatrix} = \begin{bmatrix} \cos \theta & -\sin \theta \\ \sin \theta & \cos \theta \\ \end{bmatrix} \begin{bmatrix} x \\ y \\ \end{bmatrix}.$$ This is equivalent to $$x' = x \cos \theta - y \sin \theta, \\ y' = x \sin \theta + y \cos \theta. $$ Similarly, rotation around the point with coordinates $(x_0,\ y_0)$ is given by $$x'-x_0 = (x-x_0) \cos \theta - (y-y_0) \sin \theta, \\ y'-y_0 = (x-x_0) \sin \theta + (y-y_0) \cos \theta. $$


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.