四时宝库

程序员的知识宝库

怎么判定鼠标是从哪一个方向移入盒子的?

鼠标的移入方向。

鼠标可能会从上方移入盒子,也可能会从右方移入盒子,也可能会从下方移入盒子,也可能会从左方移入盒子。怎么判定鼠标到底是从哪一个方向移入到盒子的?这时候需要使用到三角函数,我画图进行简单讲解。

为了方便理解,我绘制了一个x轴和y轴,中间就是0,0点。先假设一种场景,假设鼠标是从这个方向移入,基于这个点和坐标原点绘制一条线,它们之间会形成一个夹角。这个角度如果是在0-45,这个就是0度,到这里就是45度。往下往下方来,到这里就是-45度。

当这个角度形成的这个角度在0-45度或者因为鼠标,因为它的鼠标也可能是从这个方向移入,再绘制一条线,它们就会形成另外一个夹角。当这个夹角在0-45度或者0到-45度,就可以认定鼠标是从右方移入。

刚好有一个方法可以计算,这个方法是Math.atan2这个方法。第一个坐标是只需要鼠标移入的那个点的y坐标点和x坐标点。这个y坐标点和x坐标点怎么算?以这还是以第一个点为例,怎么知道这个点的x坐标?其实就是这段距离,x坐标是这段距离,y坐标是这段距离。

怎么计算x坐标的具体值?就是拿鼠标的clientX减去容器距离左边的距离,以及容器自身宽度的一半,就可以得到x坐标。y坐标就是拿容器距离顶部的距离加上容器自身宽度的一半,减去鼠标距离顶部可视区顶部的距离,就可以得到这段距离。

现在直接通过代码进行演示,给box加个鼠标移入事件,可以拿到鼠标的视口x轴和视口y,可以得到这个容器的中心点。只需要拿视口宽度减去dom的中心点,就可以得到它的x点。通过dom的中心点减去视口的鼠标视口的y,就可以得到y点。

·然后把它放入到atan2这个方法里,这个时候得到的是弧度,要把弧度再转成角度,转成角度后来看一下。

·现在来试一下,当鼠标从这个方向移入,当鼠标从垂直x轴的平很平的地方移入,应该是在0度左右,2.89度,6度,12,20越往上越多,27,35,到顶部的时候差不多就是45左右了,43度。

·从上方移入时候,这边时候就会超过45,48,到这边差不多90,87,当到这边的时候差不多到135左右,128,131,133,从左边移动的时候就会大于135,138,144,到这边差不多就是180度,176,这是逆时针的角度。

·当从下方移入的时候,它的值就会变成负的-2-24度,到这边差不多-45度左右,这边的值-41度,-59,-71,-84度,-114,到这边-135左右。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接