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

近日在地圖開發中遇到須要高度顯示指定區域的需求，圖形畫出來了，點擊事件卻成爲一大難題，在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 <a.y){
        if((a.y-y)/(x-a.x) > 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