最近有个项目,需要使用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值
// 计算出当前鼠标相对于元素中心