上篇文章解决了四边形带旋转角度问题,耗费一天时间想到的解决算法。但是仅仅局限于四边形。原来大神早就写好了算法,可以解决 n 多边形点击区域判断。预用此算法,首先要保证多边形第一个点的 x 轴为最小值,也就是说先要给多边形各个点坐标做一个排序,找到 x 最小的点,放到第一个,其他点依次旋转。
旋转方法:
function sort(ele) {
var min = 0,
arr = [],
len = ele.length;
for(var n = 0; n < len; n++){
if(ele[n][0] < ele[min][0]){
min = n
}
}
if(min != 0){
for(var x = min; x < ele.length; x++){
arr.push(ele[x]);
}
for(var y = 0; y < min; y++){
arr.push(ele[y]);
}
return arr
}
return ele;
}
var bbox = [[4],[1],[2],[3]];
sort(bbox)//[[1],[2],[3],[4]]
判断点击区域是否在多边形范围内:
navi_utils.pointInPolygon = function (pos, polygon) {
var inside = false;
var polygonSize = polygon.length;
var val1, val2;
for(var i = 0; i < polygonSize; i++){
var p1 = polygon[(i + polygonSize)%polygonSize];
var p2 = polygon[(i + 1 + polygonSize)%polygonSize];
if(pos[1] < p2[1]){
if(pos[1] >= p1[1]){
val1 = (pos[1] – p1[1]) * (p2[0] – p1[0]);
val2 = (pos[0] – p1[0]) * (p2[1] – p1[1]);
if(val1 > val2){
inside = ! inside;
}
}
}else if(pos[1] < p1[1]){
val1 = (pos[1] – p1[1]) * (p2[0] – p1[0]);
val2 = (pos[0] – p1[0]) * (p2[1] – p1[1]);
if(val1 < val2){
inside = ! inside;
}
}
}
return inside;
};