phpstudy集成环境

 首页 > 关于一个JS计算鼠标进入方向的算法

关于一个JS计算鼠标进入方向的算法

/*主函数 返回数字来判断从哪个方向进入*/

function (e) {
            var w = this.id.scrollWidth;
            var h = this.id.scrollHeight;
            var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1);
            var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1);
            var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
            return number;
        };

这是一个判断鼠标进入目标区域方向的算法，研究很久也没明白上面获取x,y两个值为什么要这么算。我自己也试着分析了一下，感觉像是按照正方形对角线划分4个方向角度，然后再根据实际的区域换算为正方形的实际角度。

希望有大婶帮我分析一下，不胜感激！

判断鼠标从元素矩形区域的那个方向进入的的标准为：
当鼠标从元素矩形区域外移入元素矩形区域，和鼠标行动轨迹发生交叉的那条边就认为鼠标进入的方法`
例如鼠标从上方往下和上边有交叉，就认为从上方进入~~

Math.atan2能放回-PI到PI之间的弧度

假设元素形成的矩形框的长度为w，高度为h
以选定的元素的矩形框的中心框为圆心P(rx,ry)，并这个点为坐标点原点
假设以一个圆，元素矩形框的4个点坐标分别为
P(w/2,y/2),P(w/2,-y/2),P(-w/2,-y/2),P(-w/2,y/2),
在中心点和矩形框的4个顶点画出4条连线
P(rx,ry),P(w/2,y/2)->Line1
P(rx,ry),P(w/2,-y/2)->Line2
P(rx,ry),P(-w/2,-y/2)->Line3
P(rx,ry),P(-w/2,y/2)->Line4

从图形中我们得出
Line1和Line2形成扇形区域rightS
Line2和Line3形成扇形区域bottomS
Line3和Line4形成扇形区域leftS
Line4和Line1形成扇形区域topS

因为我们无法知道进入矩形区域前鼠标的位置，如果能知道就可以直接可以知道从哪里进入了:)
但是我们能知道鼠标进入元素矩形区域后，当前鼠标相对于元素矩形区域的位置offsetX,offfsetY
那么我反推，将鼠标进入元素矩形区域后的位置和其可能进入前的原位置之间画一条直线，看这条直线有什么特征
看图:


红色线代表鼠标轨迹
灰色线代表鼠标轨迹，但是跨了2个扇形区，在进入第1个扇形区后就可计算出从哪个方向进入，后续的鼠标轨迹对计算无意
我们可以发现从一个扇形区内的鼠标进入元素矩形框其轨迹就会和对应的矩形边有交叉，可以计算出鼠标从那边移入。
计算方法自然得到：
只要进入元素矩形后我们获得的鼠标位置和矩形中心点之间形成的夹角在对应的扇形区域夹角范围内即可~~~
步骤1：计算获得的鼠标位置和矩形中心点之间形成的夹角
步骤2：计算对象扇形的夹角范围
步骤3：判断再哪个扇形区域中

//1 left
//2 bottomg
//3 right
//4 top
function getEnterDir(e){
    //元素矩形框宽度和高度
    var w = e.target.scrollWidth;
    var h = e.target.scrollHeight;
    //鼠标进入矩形框后的位置,相对于矩形框左上角位置
    var mousePointX=e.offsetX;
    var mousePointY=e.offsetY;
    //移动坐标原点到矩形中心点后，鼠标位置
    var mousePointXOnNewMatrix= mousePointX-(w/2);
    var mousePointYOnNewMatrix=(h/2)-mousePointY;
    //和中心原点的弧度
    var enterAngel= (Math.atan2(mousePointYOnNewMatrix,mousePointXOnNewMatrix)*180/Math.PI)+180;
    //矩形右上角和中心点的角度
    var startAngle=Math.atan2(h/2,w/2)*180/Math.PI+180;
    //计算出topS和bottomS扇形取夹角大小
    var topBottomHalfAngle=270-startAngle;
    //将4个扇形区边线的角度不重复的组成一个数组，并添加了当前鼠标的角度，从0~360度
    var newAngleArray=[].concat(enterAngel,0,Math.atan2(h/2,w/2)*180/Math.PI,startAngle-2*Math.atan2(h/2,w/2)*180/Math.PI,startAngle,
            startAngle+2*topBottomHalfAngle,360);
            //数组排序
    newAngleArray.sort(function(a,b){
        return a-b
    });
    //查询出当前鼠标位置角度在数组中的index值
    var dir=newAngleArray.indexOf(enterAngel);
    //在扇形区域被水平线分成了2个区，但是鼠标进入位置是同一个
    if(dir==1||dir==5){
        dir=1;
    }

    return dir;
}

简单得说就是：判断“光标进入时的点”与“矩形的中心点”之间的连线的角度。

关于js判断鼠标移入元素的方向--解释

【热门文章】
【热门文章】