Question

在javascript中旋转后，是否有人对x / y位置有翻译功能？

例如：

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

给我鼠标位置但是我的父div旋转了x度，这当然意味着mousex / mousey不正确。 javascript是否具有内置功能（不是我见过一个但是......）？

非常感谢

Answer 1

假设您的div顺时针旋转t弧度。然后变换的坐标是：

x'= cos（t）* x - sin（t）* y

y'= sin（t）* x + cos（t）* y

Answer 2

我刚刚为您撰写了以下内容，我已使用(1,0,Math.PI/2)和(0,1,Math.PI/2)进行了检查，并且确实有效。

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;
}

应该有效，请参阅Rotation Matrix in Wikipedia

当然，角度应该是弧度。您可以通过乘以Math.PI并除以180将角度转换为弧度。角度为逆时针方向，如果您想要顺时针旋转，则通过-angle或将sin更改为-sin应该有效。

javascript旋转翻译功能

2 个答案: