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

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

最终绘制效果如下:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容