近日在地图开发中遇到需要高度显示指定区域的需求，图形画出来了，点击事件却成为一大难题，在 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)
}
获取到的区域远远超过了 实际可点击区域我们需要把这个区域拆分为四个小区域，判断坐标在不在可点击区域内即可，要用到三角函数中的正切 tanso…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