Javascript 用鼠标旋转一个圆来平移平面

我有两个按钮（箭头），当它们被按下时，一切正常

不起作用的是用鼠标移动地面（将鼠标悬停在轮子上查看），它会一直跳回到以前的值（由平面上的数字显示）

如何用鼠标旋转一个圆来平移平面

const plane=$（“#plane”）
const planeX=平面偏移（）.左
常数轮=$（'.wheel>div'）
常数半径=车轮宽度（）/2
设度=0
//钮扣
让间隔
$（文档）.on（'mousedown'，'span'，event=>{
$（'.interactive'）.css（'background'，'rgba（17225547,0.25）'））
间隔=设置间隔（（）=>{
如果（event.currentTarget.id=='left'）度-=2
度数+=2
css（'transform'，'rotate（'+degrees+'deg'））.data（'degree'，degrees）
plane.css（'left'，planeX-度*（Math.PI/180）*半径+px'）
}, 10)
})
$（文档）.on（'mouseup'，'span'，（）=>{
$（'.interactive'）.css（'background'，''）
清除间隔（间隔）
})
//老鼠
const offset=wheel.parent（）.offset（）
$（文档）.on（'mouseenter'，'interactive'，事件=>{
$（'.interactive'）.css（'background'，'rgba（17225547,0.25）'））
常数度偏移=
Math.atan2(
event.pageX-（偏移量.左+半径），
event.pageY-（offset.top+半径）
) *
（180/数学PI）*
-1 -
度
$（文档）.on（'mousemove'，event2=>{
常数弧度=Math.atan2(
event2.pageX-（偏移量.左+半径），
event2.pageY-（offset.top+半径）
)
度=弧度*（180/数学π）*-1-度偏移
css（'transform'，'rotate（'+degrees+'deg'））.data（'degree'，degrees）
plane.css（'left'，planeX-度*（Math.PI/180）*半径+px'）
})
})
$（document）.on（'mouseleave'，'.interactive'，（）=>{
$（'.interactive'）.css（'background'，''）
$（文档）.off（'mousemove'）
})

X
123456789

mousemove的处理程序没有考虑移动到0度标记上。我已经更新了代码，以计算鼠标位置的变化（例如，

newMousePos-mousePos

），并解释了0度移动的原因

const plane=$（“#plane”）
const planeX=平面偏移（）.左
常数轮=$（'.wheel>div'）
常数半径=车轮宽度（）/2
设度=0
//钮扣
让间隔
$（文档）.on（'mousedown'，'span'，event=>{
$（'.interactive'）.css（'background'，'rgba（17225547,0.25）'））
间隔=设置间隔（（）=>{
如果（event.currentTarget.id=='left'）度-=2
度数+=2
css（'transform'，'rotate（'+degrees+'deg'））.data（'degree'，degrees）
plane.css（'left'，planeX-度*（Math.PI/180）*半径+px'）
}, 10)
})
$（文档）.on（'mouseup'，'span'，（）=>{
$（'.interactive'）.css（'background'，''）
清除间隔（间隔）
})
//老鼠
const offset=wheel.parent（）.offset（）
让鼠标点=0
$（文档）.on（'mouseenter'，'interactive'，事件=>{
$（'.interactive'）.css（'background'，'rgba（17225547,0.25）'））
常数度偏移=
Math.atan2(
event.pageX-（偏移量.左+半径），
event.pageY-（offset.top+半径）
) *
（180/数学PI）*
-1 -
度
$（文档）.on（'mousemove'，event2=>{
常数弧度=Math.atan2(
event2.pageX-（偏移量.左+半径），
event2.pageY-（offset.top+半径）
)
常数newMousePos=弧度*（180/Math.PI）*-1-度偏移
让我们改变=新的鼠标点-鼠标点
//调整移动超过0度。
如果（变化<-180）变化+=360
否则，如果（更改>180）更改-=360
鼠标点=新鼠标点
度+=变化
css（'transform'，'rotate（'+degrees+'deg'））.data（'degree'，degrees）
plane.css（'left'，planeX-度*（Math.PI/180）*半径+px'）
})
})
$（document）.on（'mouseleave'，'.interactive'，（）=>{
$（'.interactive'）.css（'background'，''）
$（文档）.off（'mousemove'）
})

X
123456789