Question

Does anyone have a translate function for x/y positions after rotation in javascript?

for instance:

this.mousex = event.clientX - this.el.offsetLeft;
this.mousey = event.clientY - this.el.offsetTop;

gives me the mouse position however my parent div is rotated by x-degrees which of course means the mousex/mousey are not correct. Does javascript have a function for this built in (not that I’ve seen one but..)?

thanks very much

Answer 1

I just wrote the following for you, I’ve checked it with (1,0,Math.PI/2) and (0,1,Math.PI/2) and it works.

function rotatePoints(x,y,angle){
   var point={};
   point.x = x*Math.cos(angle)- y*Math.sin(angle);
   point.y = x*Math.sin(angle) + y*Math.cos(angle);
   return point;
}

Should work, see Rotation Matrix in Wikipedia

Of course, angle should be in radians. You can convert degrees to radians by multiplying by Math.PI and dividing by 180. The angle is counter clockwise, if you want to rotate clockwise passing -angle or changing sin to -sin should work.