鼠標拖拽旋轉js

相信大家都見過這種情況，在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;