需要获取鼠标的移动角度

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 获取鼠标的手势方向角度的更多相关文章

  1. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  2. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  3. js获取鼠标位置的各种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  4. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  5. js获取鼠标坐标位置兼容多个浏览器

    这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = ev ...

  6. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  7. JS获取鼠标左（右）滑事件

    鼠标左(右)滑也是网站开发中常见的效果之一,这里对鼠标左(右)滑做出一些解释. 首先要获取需要左右滑事件的节点: eg: var div=document.getElementById("d ...

  8. js获取鼠标的位置

    <!doctype html><html><head><meta charset="utf-8"><title>获取鼠标 ...

  9. JS 获取鼠标坐标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Python-数据类型之列表

    列表和元祖都属于序列类型,该序列内可以包含任意数据类型,且数据存储是有序的,索引从0到1 一:列表概述 1.1  如何定义一个列表 中括号,已逗号为分割符,可以放任意的数据类型,甚至是对象. li = ...

  2. Jmeter性能测试之基础知识(一)

    1. 官网下载Jmeter: 点这里, 下载完成解压即可 2. 启动: 进入解压后的bin目录, Windows点击jmeter.bat, Linux执行jmeter 3. 添加线程组(user) : ...

  3. 服务器资源监控插件(jmeter)

    零.引言 我们对被测应用进行性能测试时,除了关注吞吐量.响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情况,也是非常重要的方面,通过 实时监控,可以准确的把握不同测试场景下服务器资源消 ...

  4. Wxpython入门

    Wxpython入门 api文档以及中文教程: https://pan.baidu.com/s/1TDTgHg9Mwc74ODQy68YnlQ 提取码:354n 入门示例 frame=wx.Frame ...

  5. Android-SD卡相关操作

    SD卡相关操作 1.获取 App 文件目录 //获取 当前APP 文件路径 String path1 = this.getFilesDir().getPath(); 当前APP目录也就是应用的这个目录 ...

  6. zabbix环境安装搭建

    一.Zabbix简介 zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix由zabbix server与可选组件zabbix agent两部分组成. ...

  7. JS简单实现分页显示

    完整代码源码可以在这里下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body> <!--页面控制器 --> <div id="nav" ...

  8. [HDU4864]Task (贪心)

    此图和上一篇博客的图一起看有奇效 题意 https://vjudge.net/problem/HDU-4864 思路 贪心 代码 by lyd 我实在是敲不来 #include <iostrea ...

  9. Module(CP343-1)Advanced system error SDB generation Error in rule file or rule file not found

    报这个故障的原因是因为安装目录下缺少三个 err文件.只要从好的目录下拷贝过来即可. C:\Program Files (x86)\SIEMENS\Step7\s7wbx\rul

  10. 使用Object.prototype.toString.call()方法精确判断对象的类型

    在JavaScript里使用typeof判断数据类型,只能区分基本类型,即:number.string.undefined.boolean.object. 对于null.array.function. ...