有一个需求,判断鼠标绕某点顺时针旋转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判断鼠标旋转度数以及顺逆方向详解相关推荐

  1. html判断坐标,js判断鼠标位置是否在某个div中的方法

    本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...

  2. js判断鼠标滚动放下,向上滚还是向下滚?

    js判断鼠标滚动放下,向上滚还是向下滚? demo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  3. 旋转排序数组系列题详解

    旋转排序数组系列题详解 文章目录 旋转排序数组系列题详解 一.问题描述:旋转数组的最小数字 二.分析:二分查找 三.代码 四.问题描述:寻找旋转排序数组中的最小值 五.分析:二分搜索 六.代码 七.问 ...

  4. JS逆向之补环境过瑞数详解

    JS逆向之补环境过瑞数详解 "瑞数" 是逆向路上的一座大山,是许多JS逆向者绕不开的一堵围墙,也是跳槽简历上的一个亮点,我们必须得在下次跳槽前攻克它!! 好在现在网上有很多讲解瑞数 ...

  5. python判断是否回文_对python判断是否回文数的实例详解

    设n是一任意自然数.若将n的各位数字反向排列所得自然数n1与n相等,则称n为一回文数.例如,若n=1234321,则称n为一回文数:但若n=1234567,则n不是回文数. 上面的解释就是说回文数和逆 ...

  6. Node.js中package.json中库的版本号详解(^和~区别)

    Node.js中package.json中库的版本号详解(^和~区别) 当我们查看package.json中已安装的库的时候,会发现他们的版本号之前都会加一个符号,有的是插入符号(^),有的是波浪符号 ...

  7. Linux 创建网页服务,Linux使用Node.js建立访问静态网页的服务实例详解

    Linux使用Node.js建立访问静态网页的服务实例详解 一.安装node.js运行所需要的环境,: 二.创建node目录(/node/www),并在目录下创建node.js服务文件server.j ...

  8. NB-IOT(4)---移远NB-IOT BC26模块模组简介和实际应用方向详解

    移远NB-IOT BC26模块模组简介和实际应用方向详解 继BC95和BC28之后,2017年底移远在杭州发布了基于MTK平台的新款NB-IOT BC26模组. BC26基于联发科MT2625芯片平台 ...

  9. 微信公众平台菜单编辑php,Vue.js实现微信公众号菜单编辑器步骤详解(上)

    这次给大家带来Vue.js实现微信公众号菜单编辑器步骤详解(上),Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 学习一段时间Vue.js,于是想尝试着做一个像 ...

最新文章

  1. LogiCORE IP Clocking Wizard 之 Core Architecture(时钟IP核的核架构介绍)
  2. 自学python需要多长时间-零基础自学python要多久?
  3. oracle 峰度 函数,Oracle Database 21c 十大新特性一览
  4. Android内存泄漏总结
  5. 一些我整理的 SAP 工作和学习的有用链接,持续更新
  6. [Classic] 日文版《出师表》
  7. 创建索引的方法有两种
  8. Redis作者谈Redis应用场景
  9. C++多线程的简单例子
  10. SAP License:初学者使用SAP常见问题
  11. 获取上周_北美木材价格上周趋于稳定
  12. 通过线程监控socket服务器是否done机
  13. Angular 自定义分页组件,自定义每页显示个数
  14. 聊聊spring for kafka对consumer的封装与集成
  15. 深度学习: 推进人工智能的梦想
  16. YYText-swift,swift版的YYText,优化了yylabel和yytextview的部分扩展
  17. Verilog:【7】超详细WaveDrom教程,时序图绘制利器,看这一篇就够了。
  18. JVM 直接内存的使用与回收
  19. canvas-图片的渲染
  20. 信息系统项目管理师(2022年) —— 第 13 章 项目合同管理

热门文章

  1. Android退出程序(一)——单例模式
  2. C++赋值运算符重载【C++赋值运算符重载】
  3. php用重写算出圆柱体的体积,圆柱的体积
  4. UVA-11995(STL+模拟)附讲解
  5. 中科大量子计算机重大突破,中国科大在量子计算研究中获重大突破
  6. linux系统找回数据,Linux系统上面误删的数据找回
  7. php 获取用户名,PHP如何获取当前windows系统的登录用户名
  8. 基于 ASK + EB 构建容器事件驱动服务
  9. 云原生 DevOps 的 5 步升级路径
  10. 收益 or 挑战?Serverless 究竟给前端带来了什么