js判斷鼠標(biāo)進(jìn)入容器的方向小解

fantix 發(fā)布于2019-08-20 10:31 / 2032人閱讀

摘要：有不對(duì)的地方，或者有更好的理解，請(qǐng)告訴我，謝謝原理以容器的中心點(diǎn)作為圓心，以高和寬的最小值作為直徑畫圓，將圓以，，，，，，，劃分為四個(gè)象限，鼠標(biāo)進(jìn)入容器時(shí)的點(diǎn)的值在這四個(gè)象限里分別對(duì)應(yīng)容器邊框的下，右，上，左。

$("#wrap").bind("mouseenter mouseleave",function(e) {
    var w = $(this).width();
    var h = $(this).height();
    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值為“0,1,2,3”分別對(duì)應(yīng)著“上，右，下，左”
    var eventType = e.type;
    var dirName = new Array("上方","右側(cè)","下方","左側(cè)");
    if(e.type == "mouseenter"){
        $("#result").html(dirName[direction]+"進(jìn)入");
    } else {
        $("#result").html(dirName[direction]+"離開");
    }
});

就這么幾行代碼，將我印象里會(huì)有一長(zhǎng)串的if else或者switch來完成的事完美的解決掉。在感到神奇之后，更多的是不解，因?yàn)榭床欢Ｔ诰W(wǎng)上搜索一番，也沒有找到有誰(shuí)來分析這個(gè)算法。于是自己研究了一下，現(xiàn)在寫下來，作為自己的一份學(xué)習(xí)筆記，也希望能夠和大家分享。

有不對(duì)的地方，或者有更好的理解，請(qǐng)告訴我，謝謝！

原理：以div容器的中心點(diǎn)作為圓心，以高和寬的最小值作為直徑畫圓，將圓以[π/4，3π/4)，[3π/4，5π/4），[5π/4，7π/4)，[-π/4，π/4)劃分為四個(gè)象限，鼠標(biāo)進(jìn)入容器時(shí)的點(diǎn)的atan2(y,x)值在這四個(gè)象限里分別對(duì)應(yīng)容器邊框的下，右，上，左。如下圖所示

var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

計(jì)算x坐標(biāo)值時(shí)，如果點(diǎn)原來的x坐標(biāo)的絕對(duì)值大于圓的半徑值，則按 h/w 這個(gè)比例進(jìn)行縮小，使得到的點(diǎn)的位置在容器的邊界位置所對(duì)應(yīng)的象限區(qū)間里。 y 坐標(biāo)的計(jì)算也是一樣。

var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

((Math.atan2(y, x) * (180 / Math.PI)將點(diǎn)的坐標(biāo)對(duì)應(yīng)的弧度值換算成角度度數(shù)值，這里加上180并非必要，只是為了使得到的0,1,2,3能夠與習(xí)慣性的上，右，下，左的位置對(duì)照，如果不加上180，得到的0,1,2,3就會(huì)分別對(duì)應(yīng)下，右，上，左。
*修正：這里加上180不是并非必要的，而是在這個(gè)算法里必須的，因?yàn)閍tan2(y,x)返回值的范圍是[-π,π],而不是我們習(xí)慣的[0,2π],負(fù)值會(huì)影響結(jié)果的正確性(比如右上和右下算出來的結(jié)果會(huì)不同)，而且確實(shí)也使得得到的結(jié)果0,1,2,3的順序符合了習(xí)慣(原作者可能沒想這個(gè)，只是css里總是這個(gè)順序，或許是我自己的習(xí)慣~)。

除以90，再取四舍五入值，是一個(gè)很精妙的用法，使得可以以45°為分界線。

分析完這個(gè)算法后，我內(nèi)心有些激動(dòng)。這里并沒有用到什么高深的知識(shí)，即使是三角函數(shù)的基礎(chǔ)知識(shí)都可以不知道(雖然初中就學(xué)了)，但是可以用這么短短的三兩行代碼，就把我腦袋里浮現(xiàn)的那一長(zhǎng)串的if else拋向云和山的彼端去，真的讓我很難抑制內(nèi)心的激動(dòng)，深深的體會(huì)到算法之美，數(shù)學(xué)之美。

來源：http://sentsin.com/web/112.html
相關(guān)參考文檔：http://www.cnblogs.com/lyzg/p...
代碼參考：　https://github.com/liuyunzhug...

最后感謝兩位大牛的總結(jié)