相信大家都见过这种情况,在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;
相关推荐
C++ Qt 实现鼠标拖动旋转功能,做了一个中国汉族古音律学习辅助软件,可以查找古琴音位,十二律、五音、简谱、西音、工尺对应。 主要还是技术代码,鼠标拖动旋转功能,可以借鉴到其他项目。
jQuery鼠标拖动圆盘旋转代码 jQuery鼠标拖动圆盘旋转代码
c# gdi 矩形,鼠标操作调整矩形的大小、拖拽移动、 鼠标拖动任意角度旋转功能 如果谁想学习,可以参考下!如下图所示,O是拖动的旋转点。
3d鼠标拖动图片360°旋转动画效果是一款基于jquery实现的鼠标拖动图片3D展示特效代码。
html5鼠标拖动图片3D旋转动画效果代码
js图片查看器。 鼠标拖动图片任意方向旋转,鼠标滚动滚轮缩放,任意角度翻转。 兼容各主流浏览器
mfc单文档程序,在界面上已经绘出的3d图形,用鼠标拖动,可以旋转,类似于旋转魔方
Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体 Java语言实现鼠标拖动旋转立方体
c# gdi 矩形,鼠标操作调整矩形的大小、拖拽移动、 鼠标拖动任意角度旋转功能。
js鼠标拖动图片360度平面旋转代码
3d鼠标拖动图片360°旋转动画效果是一款基于jquery实现的鼠标拖动图片3D展示特效代码。
Propeller.js是一款jQuery鼠标拖动旋转DOM元素插件。通过该插件,可以使用鼠标拖动旋转页面中的任意DOM元素。
通过滑动鼠标,能够是物体旋转,不同方向的滑动鼠标,则不同方向旋转。
鼠标拖动2D,PNG图片,呈现360°旋转的,3D动画效果。
Qt实现显示svg图片,并可拖动鼠标旋转,新人做的效果不是很好。环境ubuntu16.04+Qt5.6.1,本人新测代码在WIN7+Qt环境下可用。
html5 canvas实现可响应鼠标拖动、旋转的3D发光蓝宝石动画特效源码.zip
主要为大家详细介绍了Unity3D实现鼠标控制旋转转盘,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Qt 5.7 qml图片旋转拖动鼠标点击变化
项目实现Unity中,按住鼠标左键上下左右拖动旋转Camera观察物体,照相机旋转而不是物体本身旋转。
本示例使用QGraphics体系来实现,因为要移动对象,所以生成的图形必须是一个单独的对象,鼠标拖动绘制的过程是在临时层中完成,release后生成一个矢量的图形item并添加到场景中。 博客地址:...