需要获取鼠标的移动角度
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.throat = opt.throat || 50; //执行频率,每 50 毫秒 执行一次回调
this.distance = opt.distance || 4; //最小有效距离
this.moveP = null; //开始的点
this.events = {};
this._init();
}
MouseGesture.prototype._init = function(){
var $this = this;
$this.moveP = null;
function calcEvent(type,e){
var start = {
x:$this.moveP.x,
y:$this.moveP.y
}
var pos = {
x:e.clientX,
y:e.clientY
}
var dis = Math.sqrt((start.x - pos.x) * (start.x - pos.x) + (start.y - pos.y)*(start.y - pos.y));
if(dis >= $this.distance){
var deg = $this.getDeg(start,pos);
e["deg"] = deg;
e["missX"] = pos.x - start.x;
e["missY"] = pos.y - start.y;
$this._triggerEvent(type,e);
}
}
var move = $this._throat((e)=>{
if($this.moveP){
calcEvent("move",e);
}
},$this.throat);
window.addEventListener("mousedown",function(e){
$this.moveP = {
x:e.clientX,
y:e.clientY
};
$this._triggerEvent("start",e);
})
window.addEventListener("mousemove",function(e){
if($this.moveP){
move(e);
}
})
window.addEventListener("mouseup",function(e){
calcEvent("end",e);
$this.moveP = null;
})
}
//每次开始之前，都可以手动设置起始点,如果不设置,则默认为鼠标的 mousedown 的点
MouseEvent.prototype.setStartPoint = function(point){
if(point){
$this.moveP = point;
}
}
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._clockWise = function(start,end){
//获取顺时针的角度
return 360 - this._antiClockWise(start,end);
}
MouseGesture.prototype._throat = function(callback,num){
var timer = null;
callback = callback || function(){};
return function(){
if(!timer){
var that = this;
var arg = arguments;
timer = setTimeout(function(){
callback.apply(that,arg);
timer = null;
},num);
}
}
}
MouseGesture.prototype.on = function(type,fn){
if(!this.events[type]){
this.events[type] = [];
}
this.events[type].push(fn);
return this;
}
MouseGesture.prototype.off = function(type,fn){
if(this.events[type] ){
var index = this.events[type].indexOf(fn);
if(index > -1){
this.events[type].splice(index);
}
}
return this;
}
MouseGesture.prototype.offAll = function(){
this.events = {};
return this;
}
MouseGesture.prototype._triggerEvent = function(){
var args = arguments;
var type = args[0];
var arg = [];
for(var i = 1; i < arguments.length; i++){
arg.push(args[i])
}
var evts = this.events[type] || [];
for(var i = 0; i < evts.length; i++){
evts[i] && evts[i].apply&&evts[i].apply(this,arg);
}
return this;
}
var circle = document.getElementById("circle");
var ins = new MouseGesture({wise:true})
.on("start",function(e){
circle.style.left = e.clientX - 5 + "px";
circle.style.top = e.clientY - 5 + "px";
})
.on("move",function(e){
console.log(`角度为:${e.deg}; x方向位移:${e.missX}; y方向位移:${e.missY}`);
})
.on("end",function(e){
console.log(`角度为:${e.deg}; x方向位移:${e.missX}; y方向位移:${e.missY}`);
})
</script>
</html>
原文：https://www.cnblogs.com/muamaker/p/10637754.html