判斷用戶點擊是否在指定區域內

Enlightenment 發布于2019-08-26 13:33 / 1586人閱讀

摘要：近日在地圖開發中遇到需要高度顯示指定區域的需求，圖形畫出來了，點擊事件卻成為一大難題，在中是沒有點擊事件的，只能通過點擊區域來判斷是否點擊了對象本來如果是正正經經的矩形，判斷點擊也不是什么難事，偏偏地圖就是帶著傾斜角度這樣就沒辦法簡單的通過

近日在地圖開發中遇到需要高度顯示指定區域的需求，圖形畫出來了，點擊事件卻成為一大難題，在canvas中是沒有dom點擊事件的，只能通過點擊區域來判斷是否點擊了對象.本來如果是正正經經的矩形，判斷點擊也不是什么難事，偏偏地圖就是帶著傾斜角度.這樣就沒辦法簡單的通過x,y坐標來判斷區域問題，需要一個算法.

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

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

獲取到的區域遠遠超過了實際可點擊區域

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

 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方法是個大坑，需要轉換為 2 Math.PI / 360 deg

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.hztianpu.com/yun/109054.html

判斷鼠標點擊的位置是否在某個div區域內

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

xi4oh4o 2019-08-26 13:54 評論0 收藏0
前端常用代碼片段(五)

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

MoAir 2019-08-23 14:41 評論0 收藏0
前端常用動畫效果和功能控制

摘要：原理分析使用延遲加載效果的網站，一般也會使用一個默認的圖片來占位，比如優酷和。這樣可以防止用戶在滾動過快時造成可能出現的頁面結構混亂和圖像一時加載不出來出現的。針對這一功能，也有一個常用的插件。圖片延遲加載許多網站的圖片是在下拉滾動條時才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實現的。它可以延遲加載長頁面中的圖片。在瀏覽器可視區域外的圖片...

A Loity 2019-08-28 18:09 評論0 收藏0
前端常用動畫效果和功能控制

摘要：原理分析使用延遲加載效果的網站，一般也會使用一個默認的圖片來占位，比如優酷和。這樣可以防止用戶在滾動過快時造成可能出現的頁面結構混亂和圖像一時加載不出來出現的。針對這一功能，也有一個常用的插件。圖片延遲加載許多網站的圖片是在下拉滾動條時才加載，而此效果通常是用jQuery的lazyLoad或scrollLoading插件實現的。它可以延遲加載長頁面中的圖片。在瀏覽器可視區域外的圖片...

luck 2019-08-21 10:31 評論0 收藏0