如何检测鼠标在特定元素上的方向

Question

我目前有一个函数可以检测鼠标输入的方向。它会为每个部分返回一个整数（0-3），如下所示。

我试图找出如何改变这种功能来生成基于此图的输出：

基本上，我只是想，如果用户要弄清楚正在从左侧或右侧进入图像。我已经尝试了几次尝试和错误，但我不擅长这种数学。

我已经设置了一个JSFiddle with a console output为例。

来确定方向的功能是：

function determineDirection($el, pos){ 
    var w = $el.width(), 
     h = $el.height(), 
     x = (pos.x - $el.offset().left - (w/2)) * (w > h ? (h/w) : 1), 
     y = (pos.y - $el.offset().top - (h/2)) * (h > w ? (w/h) : 1); 

    return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180))/90 + 3) % 4; 
} 

凡pos是一个对象：{x: e.pageX, y: e.pageY}，和$el是含有目标元素的jQuery对象。

Answer 1

更换return Math.round((((Math.atan2(y,x) * (180/Math.PI)) + 180))/90 + 3) % 4;与return (x > 0 ? 0 : 1);

，我更喜欢（简单的想法）另一种选择：

function determineDirection($el, pos){ 
    var w = $el.width(), 
     middle = $el.offset().left + w/2;   
    return (pos.x > middle ? 0 : 1); 
}