在工作中,需要对鼠标的运行轨迹做一个大致判断以便能绘出更合理的图形
1、判断鼠标运行方向
在方向上定义了left、right、up、down四个方向利用开始鼠标位置与当前鼠标位置做判断
核心代码如下:
if(this.preX){
var deltaX = this.preX-drawX,
deltaY = this.preY-drawY;
if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 0) {
//left
} else if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX < 0) {
//right
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY > 0) {
//up
} else if (Math.abs(deltaY) > Math.abs(deltaX) && deltaY < 0) {
//down
}
this.preX=drawX;
this.preY=drawY;
2、运行轨迹判断
由于我只需要判断出鼠标是右上、右下、左上、左下、上右、上左、下右、下左,因此在鼠标手势判断之上再结合鼠标最后移动的位置判断即可得出,最终方向。
最终绘制效果如下: