上篇文章解決了四邊形帶旋轉角度問題,耗費一天時間想到的解決算法。可是僅僅侷限於四邊形。
原來大神早就寫好了算法,能夠解決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; };