通过Math.atan2 计算角度

最近有个项目，需要使用js来旋转元素，然后查找到了atan2这个函数可以使用，稍微总结一下

效果

地址

atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间

因为atan2返回的是弧度值，也就是从-PI到PI,如下图所示，一个半圆是180度=弧度PI,所以1度 = PI/180

比如现在某个点的坐标为{x:5,y:5},用atan2计算出来的角度 degree= Math.atan2(5,5) / (Math.PI/180) 等于45°， 注意:这里的第一个参数是y的坐标
但是现在这个角度我们还不能直接使用，因为弧度是一个逆时针方向计算出来的，而我们旋转的时候是按正时针方向旋转，所以我们用的时候要先进行取反: degree = -degree

1.上面的情况我们是已知当前的中心点，如果我们不知道当前的中心点呢

这里我们就需要计算一下了

  $(document).on('mousemove',function(e){
    var x = e.pageX;
    var y = e.pageY;
    var origin = {x:200,y:100} // 先手动指定当前中心点，也可以根据当前元素的left+width/2 的到x  top+height/2 得到y值

    // 计算出当前鼠标相对于元素中心点的坐标
    x = x - origin.x; // 因为x大于origin.x 是在y轴右边，直接减就行了
    y = origin.y - y;// 但是y如果要在x轴上方，它是比origin.y要小的，所以这里就需要反过来
        
       // 然后计算就可以了
    atan2(y,x);
});

2.上面出现的情况是元素默认水平，但如果元素默认是垂直怎么办呢

degree = Math.atan2(y,x) / (Math.PI / 180) - 90;// 默认先减90度，再取反
degree = -degree;

默认垂直

参考

弧度制
MDN