判断用户点击是否在指定区域内

近日在地图开发中遇到需要高度显示指定区域的需求，图形画出来了，点击事件却成为一大难题，在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