首页 > 代码库 > 鼠标拖拽旋转js
鼠标拖拽旋转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;
鼠标拖拽旋转js
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。