上篇文章解决了四边形带旋转角度问题,耗费一天时间想到的解决算法。可是仅仅局限于四边形。
原来大神早就写好了算法,能够解决n多边形点击区域判断。
预用此算法,首先要保证多边形第一个点的x轴为最小值,也就是说先要给多边形各个点坐标作一个排序,找到x最小的点,放到第一个,其余点依次旋转。算法
旋转方法:ide
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]]
判断点击区域是否在多边形范围内:code
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; };