js 计算获取鼠标相对某个点的移动旋转角度
// 旋转角度
function getAngle(cen, first, second) {
// cen : 中心点 [0,0]
// first : 开始点 [1,3]
// second : 结束位置 [3,4]
var f_c_x = first[0] - cen[0],
f_c_y = cen[1] - first[1],
s_c_x = second[0] - cen[0],
s_c_y = cen[1] - second[1];
var c = Math.sqrt(f_c_x * f_c_x + f_c_y * f_c_y) * Math.sqrt(s_c_x * s_c_x + s_c_y * s_c_y);
if (c == 0) return -1;
var angle = Math.acos((f_c_x * s_c_x + f_c_y * s_c_y) / c);
// 第一象限
if (cen[0] - second[0] < 0 && cen[1] - second[1] < 0) {
return angle
// 第二象限
} else if (cen[0] - second[0] < 0 && cen[1] - second[1] > 0) {
return angle
// 第三象限
} else if (cen[0] - second[0] > 0 && cen[1] - second[1] < 0) {
return 2 * Math.PI - angle
// 第四象限
} else if (cen[0] - second[0] > 0 && cen[1] - second[1] > 0) {
return 2 * Math.PI - angle
}
}
js 计算获取鼠标相对某个点的移动旋转角度的更多相关文章
- js如何获取鼠标位置
获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕,相对浏览器窗口,相对文档的坐标详解
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- js 获取鼠标的手势方向角度
需要获取鼠标的移动角度 1.mousedown 确定起始点 2.mousemove 确立相关点 3.先计算两点的斜率,然后根据三角函数和反三角函数.转换为角度 <!DOCTYPE html> ...
- JS获取鼠标位置,兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
随机推荐
- 如何参与一个GitHub开源项目?
如何参与一个GitHub开源项目? 摘要:本文是Github官如何参与一个GitHub开源项目方给出的参与Github上开源项目的一些指导,对希望加入开源社区的开发者是一个不错的参考. 最近一年开源项 ...
- Java序列化技术性能分析(JDK原生与Protostuff)
熟悉Java的朋友应该知道Java有一个叫序列化的技术,即把一个Object转换为可保存,可传输的流数据.相应的,同时存在反序列化,即将流数据转换为Object类,而在转换的过程中,该Object保持 ...
- call、apply/bind的区别和用法(简单粗暴的解释)
var obj1={ name:"bob", age:20 } var obj2={ name:"coco", age:22 } function getAge ...
- 程序员段子:世界上最大的同性交友平台github
程序员(又名程序猿)因为总是冲锋在网络的最前端,还有程序猿的各种特殊性,大家在茶余饭后都有很多关于程序员的段子流传.大多都是程序员自黑的,先说在前面,程序猿还是很好的!下面看看你有没有中枪的那一条呢? ...
- 迅为iMX6UL开发板低功耗高能效开发平台
迅为i.MX 6UL开发板基于ARM Cortex-A7内核,主频高达528 MHz,内存:512MDDR3,存储:8G EMMC,支持2路CAN,2路百兆以太网,4路USB HOST,8路串口,以及 ...
- Leetcode_638.Shopping Offers
https://leetcode.com/problems/shopping-offers/ In LeetCode Store, there are some kinds of items to s ...
- ar - 建立, 修改档案或从档案中抽取成员.
总览 ar [-]{dmpqrtx}[abcfilNoPsSuvV] [membername] [count] archive files... 描述 GNU 组织的ar 程序 用于建立, 修改档案 ...
- 谈谈JVM内存区域的划分
我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存,用户缓冲用户IO等待导致CPU的等 ...
- B1. Concurrent 多线程的创建
[概述] 多线程的创建常用的有两种方法:1). 继承 Thread 类: 2). 实现 Runnable 接口: 3). 实现 Callable 接口. [继承 Thread 类] /** * 1. ...
- 使用requests+BeaBeautiful Soup爬取妹子图图片
1. Requests:让 HTTP 服务人类 Requests 继承了urllib2的所有特性.Requests支持HTTP连接保持和连接池,支持使用cookie保持会话,支持文件上传,支持自动确定 ...