js通过获取两点间的角度，使图片跟随鼠标旋转

由于项目需要手动确认方向，
方向可以跟随手指转动或通过点击背景图片的位置和中心点形成的相应的夹角来转动。
其中页面视图图片如下：

1.获取中心静止图片的中心点坐标

let rect = document.getElementById("centerPoint").getBoundingClientRect();
//中心位置
center = {
    x: rect.left + (rect.right - rect.left) / 2,
    y: rect.top + (rect.bottom - rect.top) / 2
}

2.获取鼠标或手指触碰的坐标位置

$('#backImg').mousemove(event => {
	// event.pageY y坐标
	// event.pageX x坐标
})

3.使用Math.atan2获取两点间 ,Math.atan2返回作为(x，y)点和x轴角度的数值,然后计算得到角度，使背景转盘图片旋转

rad = Math.atan2(center.y - event.pageY, center.x - event.pageX);
deg = radStorage / (Math.PI / 180) - 90
img.css({transform: `rotate(${deg}deg)`});

4.功能实现完整代码

html

<div>
		// 背景图片
        <img src="../images/backImg.png" id="backImg">
        // 静止的中心图片
       	<img src="../images/chargePile.png" id="centerPoint">
       	// 轮盘图片
        <img src="../images/turntable.png" id="angle">
</div>

js

// 角度轮盘
var indicating_img = $("#angle");
var img = $("#angle");
$('#backImg').mousemove(event => {
	let rect = document.getElementById("centerPoint").getBoundingClientRect();
    //中心位置
    center = {
      	x: rect.left + (rect.right - rect.left) / 2,
        y: rect.top + (rect.bottom - rect.top) / 2
    }
     const x = indicating_img.offset().left + indicating_img.width() / 2;
     const y = indicating_img.offset().top + indicating_img.height() / 2;
     let rad = Math.atan2(center.y - event.pageY, center.x - event.pageX);
     // 由于我的图片尖角是正上方的，因此需要-90°
     let deg = rad / (Math.PI / 180) - 90
     img.css({transform: `rotate(${deg}deg)`});
})