[原]Javascript，我们来用js在网页中识别鼠标手势

觉得点击切换图片这样的方式不潇洒，鼠标手势呢？于是构思了一下识别鼠标手势的问题。自己去实现然后封装成了一个jquery插件。使用简洁。

下载地址：

http://download.csdn.net/download/qddnovo/7187713

 

先预览一下使用

<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="Scripts/jMouseGesture.js" type="text/javascript"></script>

 

    <script type="text/javascript">

    onload = function () { 

        $("#content").mousedown(function (e) {

            var f = 0;

            $(this).jMouseGesture(e, {

                "rLine": function () { alert("右");} ,

                "lLine": function () { alert("左"); },

                "uLine": function () { alert("上"); },

                "dLine": function () { alert("下"); },

                "nike": function () { alert("Nike钩"); },

                "cwRound": function () { alert("顺时针圈"); },

                "rcwRound": function () { alert("逆时针圈"); },

                "uRight": function () { alert("上右"); },

                "uLeft": function () { alert("上左");}

            });

        });

    }

    </script>

先看函数的使用

$(“#被点击者”).jMouseGesture(e,{“FunName”:function(){}},isAfterEvent,noSelectWord);

函数是放在mousedown中使用的，因为这样可以让用户自己定义一些点击时要做的其他事情。jMouseGesture中只监视鼠标滑动和抬起时的动作。默认阻止，如果不阻止后面触发页面的抬起事件，可以向isAfterEvent传递false。isAfterEvent默认为true。也就是说在完成鼠标手势函数后还想使用mouseup，mousemove的事件来完成某些动作，则需要传递false。noSelectWord是是否禁止在鼠标滑动的时候选中点击块内的文字，默认为true。

 

 

下面我来分析一下我的思路：

 

1.采集鼠标坐标：识别鼠标手势就是分析坐标。那么需要采集鼠标坐标，但是如果所有经过的点都采集，那么会非常占用内存，所以采用一个定时器，每隔20ms去记录一个坐标点。

 

2.分析鼠标坐标：

我的思路很简单不复杂。

分析鼠标坐标有很多方法。识别一条直线，数学上我们可以用线性回归。

一元线性回归方程如下：

根据数学公式我们可以得到回归后的方程，这就是最接近真实的那条直线了。根据直线的属性我们可以判断上下左右了。

但是我们不用。因为你知道我想画什麽形状吗。

看到过一篇使用神经网络的方法，就是边读坐标边学习，边分析。需要多次使用才能发挥好效果。很好很强大。

这些方法都是夸张。我的方法是，嗯比喻。

不是每个用户的手都有同样的状态，有的手在左右抖，有的手在上下抖，这都是计算机无法想象的。所以我们只能重新认识一下线条，来比喻……

我们由A点到B点得到A到B的向量在直角坐标系中的角度，并且值域控制在[0,360)。这样我们分析时可以统一的比较每个向量。

 

比如我是这样分析Nike钩的识别的：

    我们来看主要的函数吧。

 

返回一个包含x，y的坐标对象的函数

    function mouseCoords(e) {//兼容的得到鼠标当前坐标

        if (e.pageX || e.pageY) {

            return { x: e.pageX, y: e.pageY };

        }

        return {

            x: e.clientX + document.body.scrollLeft - document.body.clientLeft,

            y: e.clientY + document.body.scrollTop - document.body.clientTop

        };

}

 

 

 

    //该函数由两个点返回A到B点向量的角度

    function getAngle(p1, p2) {//由当前点到下一个点这两坐标的[屏幕]标点,返回该向量的角度[0,360)

        var x = p2.x - p1.x;

        var y = p1.y - p2.y; //屏幕坐标系转为直角坐标系，x,y为1到2的直角坐标系原点向量

        var angle = 0;

        if (x > 0) {//一,四象限

            if (y == 0) {

                angle = 0; //一四象限0

            }

            else if (y > 0) {

                angle = Math.atan(y / x) * 180 / Math.PI; //一象限

            }

            else if (y < 0) {

                angle = 360 - Math.atan((-y) / x) * 180 / Math.PI; //四象限

            }

        }

        else if (x < 0) {//二三象限

            if (y == 0) {

                angle = 180; //二三象限0

            }

            else if (y > 0) {

                angle = 180 - Math.atan(y / (-x)) * 180 / Math.PI; //二象限

            }

            else if (y < 0) {

                angle = Math.atan(y / x) * 180 / Math.PI + 180; //三象限

            }

        }

        else { //x==0时

            if (y > 0) {

                //90度

                angle = 90;

            }

            else if (y < 0) {

                //270度

                angle = 270;

            }

            else {

                //(0,0)

                angle = undefined;

            }

        }

        return angle;

    }

 

这两个函数就是主要函数，剩下的工作就是分析而已。

唯一要注意的就是，页面上可能会存在事件的冒泡，所以isAfterEvent来控制是否在mouseup后禁止mousedown和mousemove。但是我们的插件使用者可能会在手势识别后继续使用mousedown和mousemove这两个事件。所以传递false就可以在之后继续使用了。

 

 

 

 

By博客园.小八究.....转请注

转载于:https://www.cnblogs.com/xiaobajiu/p/3662631.html