1

上篇文章解决了四边形带旋转角度问题,耗费一天时间想到的解决算法。但是仅仅局限于四边形。
原来大神早就写好了算法,可以解决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;
};

大象
211 声望6 粉丝