Jak wykrywać kierunek myszy na konkretnym elemencie?

Question

Mam obecnie funkcję, która wykrywa kierunek wprowadzania myszy. Zwraca liczbę całkowitą (0-3) dla każdej sekcji, jak pokazano poniżej.

Próbuję dowiedzieć się, jak zmienić tę funkcję, aby produkować wyjście oparte na tej ilustracji:

Zasadniczo, po prostu chcę, aby dowiedzieć się, jeśli użytkownik wprowadza obraz z lewej lub z prawej strony. Miałem kilka prób prób i błędów, ale nie jestem zbyt dobry w tego rodzaju matematyce.

Jako przykład ustawiłem JSFiddle with a console output.

Funkcja celu określenia kierunku jest:

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; 
} 

przypadku pos Przedmiotem: {x: e.pageX, y: e.pageY} i $el obiektem jQuery zawierający element docelowy.

Answer 1

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

Innym rozwiązaniem, które lubię lepiej (prostszy pomysł):

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