js 获取鼠标的手势方向角度
需要获取鼠标的移动角度
1、mousedown 确定起始点
2、mousemove 确立相关点
3、先计算两点的斜率，然后根据三角函数和反三角函数。转换为角度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.circle{
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div class="circle" id="circle"></div>
</body>
<script type="text/javascript"> function MouseGesture(opt){
opt = opt || {};
if(opt.wise){
//是否 获取顺时针角度,默认为逆时针角度
this._getDeg = this._clockWise;
}else{
this._getDeg = this._antiClockWise;
}
this.distance = opt.distance || 4; //最小有效距离
this.vaildOffsetDeg =opt.vaildOffsetDeg || 80; //有效的差值角度，大于这个值，相当于拖拽无效 this.startPoint = null; //开始的点
this.options = {}; //其他参数 偏移角度 offsetDeg ， 偏移比例 offsetRate this.cache = null; //缓存的数据
} MouseGesture.prototype._clockWise = function (start,end) {
//获取顺时针的角度
return 360 - this._antiClockWise(start,end);
} MouseGesture.prototype._antiClockWise = function (start,end) {
//获取逆时针的旋转角度
var x1 = start.x;
var y1 = start.y;
var x2 = end.x;
var y2 = end.y;
var deg = 0;
if(x1 != x2){
var k = (y1-y2)/(x1-x2);
var a = Math.atan(k);
deg = a * 180 /Math.PI - 90; //弧度转角度
deg = Math.abs(deg);
if( x1 >= x2){
deg = deg + 180;
}
}else{
if(y2 > y1){
deg = 0;
}else{
deg = 180;
}
}
return Math.floor(deg);
} MouseGesture.prototype.transformDeg = function (deg) {
if(deg >= 360){
deg = deg - 360;
}
if(deg < 0 ){
deg = 360 + deg;
}
return deg
} /**
* 计算可用的角度
* @private
*/
MouseGesture.prototype._invalidDeg = function (deg,offsetDeg) {
var $this = this; var vaildOffsetDeg = $this.vaildOffsetDeg || 80; var start = $this.transformDeg(offsetDeg - vaildOffsetDeg);
var end = $this.transformDeg(offsetDeg + vaildOffsetDeg); if(start >= 360 - 2*vaildOffsetDeg){
if(deg <= end){
if(offsetDeg <= end){
return deg - offsetDeg;
}else{
return deg - (360 - offsetDeg);
}
}
if( deg >= start){
if(offsetDeg > start){
return deg - offsetDeg;
}else{
return (360 - deg) + offsetDeg;
}
}
}else{
if(deg <= end && deg >= start){
return offsetDeg - deg;
}
}
return false;
} /**
* 对外的api，设置起始点
* @param start
* @param options
*/
MouseGesture.prototype.setStart = function (start,options,cache) {
options = options || {};
this.startPoint = start; //开始的点
this.options = options; //其他参数,偏移角度 offsetDeg ， 偏移比例 offsetRate this.distance = options.distance || 4; //最小有效距离
this.vaildOffsetDeg = options.vaildOffsetDeg || 80; //有效的差值角度 this.cache = cache || null;
} /**
* 结束之后，清空设置
*/
MouseGesture.prototype.setEnd = function (opt) {
opt = opt || {};
this.distance = opt.distance || 4; //最小有效距离
this.vaildOffsetDeg =opt.vaildOffsetDeg || 80; //有效的差值角度，大于这个值，相当于拖拽无效 this.startPoint = null; //开始的点
this.options = {}; //其他参数
this.cache = null;
} /**
* 获取角度相关信息
* @param end
*/
MouseGesture.prototype.getDegInfo = function (end) {
if(this.startPoint && end){
var obj = {};
var start = {
x:this.startPoint.x,
y:this.startPoint.y
}
var dis = Math.sqrt((start.x - end.x) * (start.x - end.x) + (start.y - end.y)*(start.y - end.y)); obj["distance"] = dis;
if(dis >= this.distance){
var deg = this._getDeg(start,end);
obj["deg"] = this.transformDeg(deg);
obj["missX"] = end.x - start.x;
obj["missY"] = end.y - start.y;
return obj;
}else{
return false;
}
}else{
return false;
}
} /**
* 计算偏移量
*/
MouseGesture.prototype.calcOffset = function (end) {
var $this = this;
var obj = $this.getDegInfo(end);
if(obj){
var offsetDeg = $this.options.offsetDeg || 0;
offsetDeg = $this.transformDeg(offsetDeg);
var missDeg1 = $this._invalidDeg(obj.deg,offsetDeg); //偏移角度,正面
var missDeg2 = $this._invalidDeg($this.transformDeg(obj.deg + 180),offsetDeg); //偏移角度，反面
var missDeg = false;
var digital = 1;
if(missDeg2 !== false){
missDeg = missDeg2;
digital = -1;
} if(missDeg1 !== false){
missDeg = missDeg1;
digital = 1;
} if(missDeg !== false){
//有效的拖拽角度
//计算偏移比例
missDeg = $this.degToRadian(missDeg); var dist = digital * obj.distance * Math.cos(missDeg);
var offsetRate = $this.options.offsetRate || 1; //如果是边，偏移比例应该是 1 ，如果是拐角，偏移比例应该是 Math.sqrt(2)/2
//console.log(missDeg1,missDeg2,obj.deg,offsetDeg,dist,digital);
return dist * offsetRate;
}
}
return false; } MouseGesture.prototype.calcOffsetInfo = function (end) {
var dis = this.calcOffset(end)
if(dis !== false){
var obj = {
distance:dis
}
if(this.cache){
obj["cache"] = this.cache;
}
return obj;
}
return false;
} //角度转弧度
MouseGesture.prototype.degToRadian = function (deg) {
return deg * Math.PI/180;
} //弧度转角度
MouseGesture.prototype.RadianToDeg = function (radian) {
return radian * 180/Math.PI;
} //开始使用 var circle = document.getElementById("circle"); var ins = new MouseGesture({wise:true}); window.addEventListener("mousedown",function(e){
ins.setStart({
x:e.clientX,
y:e.clientY
});
circle.style.left = e.clientX - 5 + "px";
circle.style.top = e.clientY - 5 + "px";
})
window.addEventListener("mousemove",function(e){
if(!ins.startPoint){
return ;
}
var obj = ins.getDegInfo({
x:e.clientX,
y:e.clientY
});
if(obj){
console.log(`角度为:${obj.deg}; x方向位移:${obj.missX}; y方向位移:${obj.missY} ;两点之间的距离为:${obj.distance}`);
}else{
console.log("无效的移动");
}
})
window.addEventListener("mouseup",function(e){
ins.setEnd();
}) </script>
</html>
js 获取鼠标的手势方向角度的更多相关文章
- 原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- js获取鼠标位置的各种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js获取鼠标坐标位置兼容多个浏览器
这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...
- JS获取鼠标位置，兼容IE FF
由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...
- JS获取鼠标左（右）滑事件
鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("d ...
- js获取鼠标的位置
<!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...
- JS 获取鼠标坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- c/c++/java如何访问数据库（优秀博文）
(下面是c++) https://www.cnblogs.com/47088845/p/5706496.html https://www.cnblogs.com/shiyingzhi/p/7896 ...
- P1169 [ZJOI2007]棋盘制作 DP悬线法
题目描述 国际象棋是世界上最古老的博弈游戏之一,和中国的围棋.象棋以及日本的将棋同享盛名.据说国际象棋起源于易经的思想,棋盘是一个8 \times 88×8大小的黑白相间的方阵,对应八八六十四卦,黑白 ...
- C - 树的统计Count - 树链剖分
思路 :树剖模板,线段树维护即可. #include<bits/stdc++.h> using namespace std; #define MID int m = (l+r)/2 #de ...
- 在 Mac OS X 下，如何向 sudoers 文件添加新用户
注: 1.使用待添加的用户名替换"username". 2.以下涉及输入的标点符号均为半角字符,即英文输入法下的标点符号. 以管理员账号密码登录 Mac OS X,打开 Termi ...
- 第八篇 Flask配置
Flask 是一个非常灵活且小而精的web框架 , 那么灵活性从什么地方体现呢? 列如 Flask配置,这个东西怎么用呢? 它能给我们带来怎么样的方便呢? app配置 首先展示一下: from fl ...
- 潭州课堂25班：Ph201805201 tornado 项目 第六课 用户和图片分享的集成（课堂笔记）
tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来 辅助用户上传的图片,生 ...
- 我的 FPGA 学习历程（05）—— 使用 Modelsim 仿真工具
在第 3 篇中讲到了如何使用图形进行仿真激励输入,图形输入法尽管简单易学,但如若要求复杂的仿真输入激励.较长的仿真时间或是要求打印输出信息乃至输出文件日志则显得不够用了. 本篇以上一篇的 3-8 译码 ...
- Nikita and string [思维-暴力] ACM
codeforces Nikita and string time limit per test 2 seconds memory limit per test 256 megabytes O ...
- 【洛谷】SAC E#1 Factorial
别人可以眼杀我却研究了一个小时看了题解才懂的数学题 输入: n, k 输出: n!在k进制下后缀0的个数 n,k <= 10^12 将 n! 表示成 x×2y5z 的形式,其中 x mod 2 ...
- I Think I Need a Houseboat POJ - 1005
I Think I Need a Houseboat POJ - 1005 解题思路:水题 #include <iostream> #include <cstdio> #inc ...