鼠标拖拽旋转js

Posted 2020-08-09

相信大家都见过这种情况，在ppt或word中，有个文本框，选中后，在上方会出现一个旋转的图标(如下图),拖动此图标时会旋转，那么这个角度该怎么计算？

我是这样算的，以图形中心为圆心(O)，从圆心出发的y轴为边(OA)，以鼠标当前位置与圆心连线(OB) ,

计算BOA的角度。

tg BOA = (OB_x-O_x)/(OB_y - O_y)根据值算出角度，正值为顺时针，负值为逆时针

当然还要根据B点相对O点所处的象限来计算具体的角度值

 

在JS中的操作：

假如画布坐标为(x,y)(如果界面比较复杂，可能要利用jquery的offset之类的方法递归算出其相对body的坐标,方便pageX与pageY来计算事件位置在画布中的坐标)，节点坐标为x1,y1,event的pageX,pageY

代码如下：

先算出画布相对body坐标，再计算出pageX相对pageY坐标，进而算出角度，在有些情况下可能要注意初始角度，有的时候需要根据每次角度的偏移来算出新的角度

var containerOffset = $(‘#‘ + this.id ).offset();
			var offsetX = containerOffset[‘left‘];
			var offsetY = containerOffset[‘top‘];
			var mouseX = ev.pageX - offsetX;//计算出鼠标相对于画布顶点的位置,无pageX时用clientY + body.scrollTop - body.clientTop代替,可视区域y+body滚动条所走的距离-body的border-top,不用offsetX等属性的原因在于，鼠标会移出画布
			var mouseY = ev.pageY - offsetY;
			var ox = mouseX - cx;//cx,cy为圆心
			var oy = mouseY - cy;
			var to = Math.abs( ox/oy );
			var angle = Math.atan( to )/( 2 * Math.PI ) * 360;//鼠标相对于旋转中心的角度
			if( ox < 0 && oy < 0)//相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系
			{
				angle = -angle;
			}else if( ox < 0 && oy > 0)//左下角,3象限
			{
				angle = -( 180 - angle )
			}else if( ox > 0 && oy < 0)//右上角，1象限
			{
				angle = angle;
			}else if( ox > 0 && oy > 0)//右下角，2象限
			{
				angle = 180 - angle;
			}
			var offsetAngle = angle - this.currentAngle;