javascript 鼠标手势判断&&运行轨迹判

在工作中，需要对鼠标的运行轨迹做一个大致判断以便能绘出更合理的图形

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、运行轨迹判断

由于我只需要判断出鼠标是右上、右下、左上、左下、上右、上左、下右、下左，因此在鼠标手势判断之上再结合鼠标最后移动的位置判断即可得出，最终方向。

最终绘制效果如下：