js判断鼠标旋转度数以及顺逆方向详解
有一个需求,判断鼠标绕某点顺时针旋转n度后做什么事,逆时针旋转n度后作什么事,即可用到本案例
首先我们可以得到三个点,分别为中心点,起始点和结束点,于是可以知道三点的坐标,再通过余弦定理求出旋转角度,同时可知三边的向量,便可通过叉乘求出方向为顺时针还是逆时针。
运算代码如下:
1 var pointA = { 2 X: 500, 3 Y: 300 4 }; 5 var pointB = {}; 6 var pointC = {}; // A,B,C分别代表中心点,起始点,结束点坐标 7 // 这里通过鼠标的移动获取起始点和结束点 8 var typeMouse = false; 9 var allA = 0; // 存放鼠标旋转总共的度数 10 $(document).on('mousedown', function(e) { 11 pointB.X = e.pageX; 12 pointB.Y = e.pageY; 13 typeMouse = true; //获取起始点坐标 14 }); 15 $(document).on('mousemove', function(e) { 16 if(typeMouse) { 17 pointC.X = e.pageX; 18 pointC.Y = e.pageY; // 获取结束点坐标 19 var AB = {}; 20 var AC= {}; 21 AB.X = (pointB.X - pointA.X); 22 AB.Y = (pointB.Y - pointA.Y); 23 AC.X = (pointC.X - pointA.X); 24 AC.Y = (pointC.Y - pointA.Y); // 分别求出AB,AC的向量坐标表示 25 var direct = (AB.X * AC.Y) - (AB.Y * AC.X); // AB与AC叉乘求出逆时针还是顺时针旋转 26 var lengthAB = Math.sqrt( Math.pow(pointA.X - pointB.X, 2) + 27 Math.pow(pointA.Y - pointB.Y, 2)), 28 lengthAC = Math.sqrt( Math.pow(pointA.X - pointC.X, 2) + 29 Math.pow(pointA.Y - pointC.Y, 2)), 30 lengthBC = Math.sqrt( Math.pow(pointB.X - pointC.X, 2) + 31 Math.pow(pointB.Y - pointC.Y, 2)); 32 var cosA = (Math.pow(lengthAB, 2) + Math.pow(lengthAC, 2) - Math.pow(lengthBC, 2)) / 33 (2 * lengthAB * lengthAC); // 余弦定理求出旋转角 34 var angleA = Math.round( Math.acos(cosA) * 180 / Math.PI ); 35 if (direct < 0){ 36 allA -= angleA; //叉乘结果为负表示逆时针旋转, 逆时针旋转减度数 37 } else { 38 allA += angleA; //叉乘结果为正表示顺时针旋转,顺时针旋转加度数 39 } 40 pointB.X = pointC.X; 41 pointB.Y = pointC.Y; //运算结束后将起始点重新赋值为结束点,作为下一次的起始点 42 } 43 }); 44 $(document).on('mouseup', function(e) { 45 typeMouse = false; 46 });
转载于:https://www.cnblogs.com/passerma/p/10875793.html
js判断鼠标旋转度数以及顺逆方向详解相关推荐
- html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
- js判断鼠标滚动放下,向上滚还是向下滚?
js判断鼠标滚动放下,向上滚还是向下滚? demo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 旋转排序数组系列题详解
旋转排序数组系列题详解 文章目录 旋转排序数组系列题详解 一.问题描述:旋转数组的最小数字 二.分析:二分查找 三.代码 四.问题描述:寻找旋转排序数组中的最小值 五.分析:二分搜索 六.代码 七.问 ...
- JS逆向之补环境过瑞数详解
JS逆向之补环境过瑞数详解 "瑞数" 是逆向路上的一座大山,是许多JS逆向者绕不开的一堵围墙,也是跳槽简历上的一个亮点,我们必须得在下次跳槽前攻克它!! 好在现在网上有很多讲解瑞数 ...
- python判断是否回文_对python判断是否回文数的实例详解
设n是一任意自然数.若将n的各位数字反向排列所得自然数n1与n相等,则称n为一回文数.例如,若n=1234321,则称n为一回文数:但若n=1234567,则n不是回文数. 上面的解释就是说回文数和逆 ...
- Node.js中package.json中库的版本号详解(^和~区别)
Node.js中package.json中库的版本号详解(^和~区别) 当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号 ...
- Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解
Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...
- NB-IOT(4)---移远NB-IOT BC26模块模组简介和实际应用方向详解
移远NB-IOT BC26模块模组简介和实际应用方向详解 继BC95和BC28之后,2017年底移远在杭州发布了基于MTK平台的新款NB-IOT BC26模组. BC26基于联发科MT2625芯片平台 ...
- 微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解(上)
这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...
最新文章
- LogiCORE IP Clocking Wizard 之 Core Architecture(时钟IP核的核架构介绍)
- 自学python需要多长时间-零基础自学python要多久?
- oracle 峰度 函数,Oracle Database 21c 十大新特性一览
- Android内存泄漏总结
- 一些我整理的 SAP 工作和学习的有用链接,持续更新
- [Classic] 日文版《出师表》
- 创建索引的方法有两种
- Redis作者谈Redis应用场景
- C++多线程的简单例子
- SAP License:初学者使用SAP常见问题
- 获取上周_北美木材价格上周趋于稳定
- 通过线程监控socket服务器是否done机
- Angular 自定义分页组件,自定义每页显示个数
- 聊聊spring for kafka对consumer的封装与集成
- 深度学习: 推进人工智能的梦想
- YYText-swift,swift版的YYText,优化了yylabel和yytextview的部分扩展
- Verilog:【7】超详细WaveDrom教程,时序图绘制利器,看这一篇就够了。
- JVM 直接内存的使用与回收
- canvas-图片的渲染
- 信息系统项目管理师(2022年) —— 第 13 章 项目合同管理
热门文章
- Android退出程序(一)——单例模式
- C++赋值运算符重载【C++赋值运算符重载】
- php用重写算出圆柱体的体积,圆柱的体积
- UVA-11995(STL+模拟)附讲解
- 中科大量子计算机重大突破,中国科大在量子计算研究中获重大突破
- linux系统找回数据,Linux系统上面误删的数据找回
- php 获取用户名,PHP如何获取当前windows系统的登录用户名
- 基于 ASK + EB 构建容器事件驱动服务
- 云原生 DevOps 的 5 步升级路径
- 收益 or 挑战?Serverless 究竟给前端带来了什么