最近有个项目,需要使用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;