国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

判斷用戶(hù)點(diǎn)擊是否在指定區(qū)域內(nèi)

Enlightenment / 1409人閱讀

摘要：近日在地圖開(kāi)發(fā)中遇到需要高度顯示指定區(qū)域的需求，圖形畫(huà)出來(lái)了，點(diǎn)擊事件卻成為一大難題，在中是沒(méi)有點(diǎn)擊事件的，只能通過(guò)點(diǎn)擊區(qū)域來(lái)判斷是否點(diǎn)擊了對(duì)象本來(lái)如果是正正經(jīng)經(jīng)的矩形，判斷點(diǎn)擊也不是什么難事，偏偏地圖就是帶著傾斜角度這樣就沒(méi)辦法簡(jiǎn)單的通過(guò)

近日在地圖開(kāi)發(fā)中遇到需要高度顯示指定區(qū)域的需求，圖形畫(huà)出來(lái)了，點(diǎn)擊事件卻成為一大難題，在canvas中是沒(méi)有dom點(diǎn)擊事件的，只能通過(guò)點(diǎn)擊區(qū)域來(lái)判斷是否點(diǎn)擊了對(duì)象.本來(lái)如果是正正經(jīng)經(jīng)的矩形，判斷點(diǎn)擊也不是什么難事，偏偏地圖就是帶著傾斜角度.這樣就沒(méi)辦法簡(jiǎn)單的通過(guò)x,y坐標(biāo)來(lái)判斷區(qū)域問(wèn)題，需要一個(gè)算法.

首先如果地圖沒(méi)有傾斜判斷方式應(yīng)該是x>左上角(a)的x坐標(biāo)，小于右上角(b)的x坐標(biāo)，y>右下角(c)的y坐標(biāo),小于右上角(b)的y坐標(biāo)．這里的坐標(biāo)系為屏幕坐標(biāo)系，X軸向右為正，Y軸向下為正。

if (x >= a.x && x <= b.x && y >= c.y && y <= b.y){
    //alert(true)
}

獲取到的區(qū)域遠(yuǎn)遠(yuǎn)超過(guò)了 實(shí)際可點(diǎn)擊區(qū)域

我們需要把這個(gè)區(qū)域拆分為四個(gè)小區(qū)域，判斷坐標(biāo)在不在可點(diǎn)擊區(qū)域內(nèi)即可，要用到三角函數(shù)中的正切tan
so...
y/x < tan(deg)就是在區(qū)域內(nèi)
能夠獲取到的鼠標(biāo)點(diǎn)擊的坐標(biāo)(x,y)，矩形四個(gè)點(diǎn)坐標(biāo)(a,b,c,d),地圖傾斜角度deg
調(diào)用方式應(yīng)該是：

 checkClickArea(x,y,a,b,c,d,deg)

思路有了代碼便水到渠成

function checkClickArea(x,y,a,b,c,d,deg) {
    deg = 2 *Math.PI / 360 * deg;
    var pi = Math.tan(deg);
    if(x < a.x || x > c.x || y < b.y || y > d.y){
        return false;
    }else if(x < b.x && y  pi){
            return false
        }
        return true
    }else if(x > b.x && y < c.y){
        if((x-b.x) / (y-b.y) > pi){
            return false
        }
        return true
    }else if(x > d.x && y > c.y){
        if((d.y-y)/(x-d.x) < pi){
            return false
        }
        return true
    }else if(x < d.x && y > a.y){
        if((x-a.x)/(y-a.y) < pi){
            return false
        }
        return true
    }else{
        return true
    }
}

其中Math.tan方法是個(gè)大坑，需要轉(zhuǎn)換為 2 Math.PI / 360 deg

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109054.html

相關(guān)文章

  • 判斷鼠標(biāo)點(diǎn)擊的位置是否在某個(gè)div區(qū)域內(nèi)

    摘要：判斷鼠標(biāo)點(diǎn)擊的位置是否在某個(gè)區(qū)域內(nèi)，可用在右鍵菜單的顯示與隱藏等 //判斷鼠標(biāo)點(diǎn)擊的位置是否在某個(gè)div區(qū)域內(nèi)，可用在右鍵菜單的顯示與隱藏等 function isInDiv(event,divId){ var div = document.getElementById(divId) var x=event.clientX var y=event.clientY...

    xi4oh4o 評(píng)論0 收藏0

  • 前端常用代碼片段(五)

    摘要：當(dāng)運(yùn)行時(shí)，如果不為，則將超時(shí)函數(shù)推送到事件隊(duì)列，并且函數(shù)退出，從而使調(diào)用堆棧清零。因此，該方法從頭到尾不經(jīng)過(guò)直接遞歸調(diào)用即可處理，因此調(diào)用堆棧保持清晰，無(wú)論迭代次數(shù)如何。 前端常用代碼片段(一) 點(diǎn)這里前端常用代碼片段(二) 點(diǎn)這里前端常用代碼片段(三) 點(diǎn)這里前端常用代碼片段(四) 點(diǎn)這里 1.tap事件點(diǎn)透問(wèn)題？ 問(wèn)題點(diǎn)擊穿透問(wèn)題：點(diǎn)擊蒙層（mask）上的關(guān)閉按鈕，蒙層消失后發(fā)現(xiàn)觸...

    MoAir 評(píng)論0 收藏0

  • 前端常用動(dòng)畫(huà)效果和功能控制

    摘要：原理分析使用延遲加載效果的網(wǎng)站，一般也會(huì)使用一個(gè)默認(rèn)的圖片來(lái)占位，比如優(yōu)酷和。這樣可以防止用戶(hù)在滾動(dòng)過(guò)快時(shí)造成可能出現(xiàn)的頁(yè)面結(jié)構(gòu)混亂和圖像一時(shí)加載不出來(lái)出現(xiàn)的。針對(duì)這一功能，也有一個(gè)常用的插件。 圖片延遲加載 許多網(wǎng)站的圖片是在下拉滾動(dòng)條時(shí)才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實(shí)現(xiàn)的。它可以延遲加載長(zhǎng)頁(yè)面中的圖片。在瀏覽器可視區(qū)域外的圖片...

    luck 評(píng)論0 收藏0

  • 前端常用動(dòng)畫(huà)效果和功能控制

    摘要：原理分析使用延遲加載效果的網(wǎng)站，一般也會(huì)使用一個(gè)默認(rèn)的圖片來(lái)占位，比如優(yōu)酷和。這樣可以防止用戶(hù)在滾動(dòng)過(guò)快時(shí)造成可能出現(xiàn)的頁(yè)面結(jié)構(gòu)混亂和圖像一時(shí)加載不出來(lái)出現(xiàn)的。針對(duì)這一功能，也有一個(gè)常用的插件。 圖片延遲加載 許多網(wǎng)站的圖片是在下拉滾動(dòng)條時(shí)才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實(shí)現(xiàn)的。它可以延遲加載長(zhǎng)頁(yè)面中的圖片。在瀏覽器可視區(qū)域外的圖片...

    A Loity 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<