JS判断坐标点是否在给定的多边形内

处理dicom时用到的一个方法,做个记录。

function ContainsPoint(polygon, pointX, pointY) {
  let n = polygon.length >> 1;

  let ax, lup;
  let ay = polygon[2 * n - 3] - pointY;
  let bx = polygon[2 * n - 2] - pointX;
  let by = polygon[2 * n - 1] - pointY;

  if (bx === 0 && by === 0) return false; // point on edge

  // let lup = by > ay;
  for (let ii = 0; ii < n; ii++) {
    ax = bx;
    ay = by;
    bx = polygon[2 * ii] - pointX;
    by = polygon[2 * ii + 1] - pointY;
    if (bx === 0 && by === 0) return false; // point on edge
    if (ay === by) continue;
    lup = by > ay;
  }

  let depth = 0;
  for (let i = 0; i < n; i++) {
    ax = bx;
    ay = by;
    bx = polygon[2 * i] - pointX;
    by = polygon[2 * i + 1] - pointY;
    if (ay < 0 && by < 0) continue; // both 'up' or both 'down'
    if (ay > 0 && by > 0) continue; // both 'up' or both 'down'
    if (ax < 0 && bx < 0) continue; // both points on the left

    if (ay === by && Math.min(ax, bx) < 0) return true;
    if (ay === by) continue;

    let lx = ax + ((bx - ax) * -ay) / (by - ay);
    if (lx === 0) return false; // point on edge
    if (lx > 0) depth++;
    if (ay === 0 && lup && by > ay) depth--; // hit vertex, both up
    if (ay === 0 && !lup && by < ay) depth--; // hit vertex, both down
    lup = by > ay;
  }
  return (depth & 1) === 1;
}

polygon---组成多边形的点 [x1, y1, x2, y2, x3, y3, ...]

转载于:https://zhuanlan.zhihu.com/p/142645509 

 

出处: https://github.com/substack/point-in-polygon/blob/master/index.js

github: https://github.com/substack/point-in-polygon

复制代码

module.exports = function (point, vs) {
    // ray-casting algorithm based on
    // http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
    
    var x = point[0], y = point[1];
    
    var inside = false;
    for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
        var xi = vs[i][0], yi = vs[i][1];
        var xj = vs[j][0], yj = vs[j][1];
        
        var intersect = ((yi > y) != (yj > y))
            && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
        if (intersect) inside = !inside;
    }
    
    return inside;
};

复制代码

复制代码

//example:
var inside = require('point-in-polygon');
var polygon = [ [ 1, 1 ], [ 1, 2 ], [ 2, 2 ], [ 2, 1 ] ]; //左上, 右上, 右下, 左下

console.dir([
    inside([ 1.5, 1.5 ], polygon),
    inside([ 4.9, 1.2 ], polygon),
    inside([ 1.8, 1.1 ], polygon)
]);

复制代码

判断一个点是否在一个圆这内:

复制代码

function pointInsideCircle(point, circle, r) {
    if (r===0) return false
    var dx = circle[0] - point[0]
    var dy = circle[1] - point[1]
    return dx * dx + dy * dy <= r * r
}

 转载于:https://www.cnblogs.com/zlog/p/6042270.html 

 

 点在多边形内算法,JS判断一个点是否在一个复杂多边形的内部:

function isInPolygon(checkPoint, polygonPoints) {
    var counter = 0;
    var i;
    var xinters;
    var p1, p2;
    var pointCount = polygonPoints.length;
    p1 = polygonPoints[0];
 
    for (i = 1; i <= pointCount; i++) {
        p2 = polygonPoints[i % pointCount];
        if (
            checkPoint[0] > Math.min(p1[0], p2[0]) &&
            checkPoint[0] <= Math.max(p1[0], p2[0])
        ) {
            if (checkPoint[1] <= Math.max(p1[1], p2[1])) {
                if (p1[0] != p2[0]) {
                    xinters =
                        (checkPoint[0] - p1[0]) *
                            (p2[1] - p1[1]) /
                            (p2[0] - p1[0]) +
                        p1[1];
                    if (p1[1] == p2[1] || checkPoint[1] <= xinters) {
                        counter++;
                    }
                }
            }
        }
        p1 = p2;
    }
    if (counter % 2 == 0) {
        return false;
    } else {
        return true;
    }
}
测试:

 

先选取一个范围:http://geojson.io/#map=15/31.1422/121.6617

1. 选取一点再这个范围内进行测试:

测试再浏览器控制台加载方法和调用,验证这一点在范围中

2:测试某一点不在这个范围之内

转载于:https://blog.csdn.net/heyangyi_19940703/article/details/78606471 

 

JavaScript实现,判断一个点是否在多边形内

复制代码

//定义点的结构体
function point(){
 this.x=0;
 this.y=0;
}

//计算一个点是否在多边形里,参数:点,多边形数组
function PointInPoly(pt, poly) { 
    for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) 
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) 
        && (c = !c); 
    return c; 
}

 

//调用

var pt=new point();
pt.x=34.32812720562833;
pt.y=108.93115997314453;

var _poly=[{x:1.1,y:1.1},{x:3,y:1},{x:6,y:4},{x:2,y:10},{x:1.1,y:1.1}];


var xx=PointInPoly(pt,_poly);
alert(xx);

复制代码

 

 转载于:https://www.cnblogs.com/jiangxiaobo/p/6046542.html 

 

百度地图 判断一个标注点是否在多边形区域里

判断一个标注点是否在多边形区域里 

/**
			 * 计算一个点是否在多边形里
			 * @param {Object} pt 标注点
			 * @param {Object} poly 多边形数组
			 */
            function isInsidePolygon(pt, poly){
                for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) 
                    ((poly[i].lat <= pt.lat && pt.lat < poly[j].lat) || (poly[j].lat <= pt.lat && pt.lat < poly[i].lat)) &&
                    (pt.lng < (poly[j].lng - poly[i].lng) * (pt.lat - poly[i].lat) / (poly[j].lat - poly[i].lat) + poly[i].lng) &&
                    (c = !c);
                return c;
            }

转载于:https://blog.csdn.net/jiazimo/article/details/20922215 

 

JS判断坐标点是否在给定的多边形内

(function (window) {
        "use strict";
        /**
         * 判断给出的坐标点是否在多边形内
         * */
        function pointInPolygon(targetPoint, targetPoints) {
            var leftPointCount = 0;
            var rightPointCount = 0;//左右点的个数
            var _points = [];
            //第一步:取出所有的点,并计算交点坐标
            for (var i = 0, _length = targetPoints.length - 1; i < _length; i++) {
                var p1 = targetPoints[i], p2 = targetPoints[i + 1];//取出当前点和当前点的下一个点
                var point = _calcCrossoverPoint(targetPoint, p1, p2);
                //如果交点有效,则保存
                if (point) {
                    _points.push(point);
                }
            }
//            第二步:计算给定的坐标点,左右两边的交点个数,奇数在范围内,偶数则不在
            for (var j = 0, length = _points.length; j < length; j++) {
                var x = _points[j];
                if (x === targetPoint.x) {
                    return false;//在线上,直接返回不在范围内
                } else {
                    (targetPoint.x !== x && targetPoint.x > x) ? leftPointCount++ : rightPointCount++;
                }
            }
            //判断交点个数
            return (leftPointCount % 2 !== 0 && rightPointCount % 2 !== 0);
        }

        /**
         * 算交点坐标,坐标点在扫描行上或者上方时,交点无效
         * @param targetPoint
         * @param startPoint
         * @param endPoint
         * @returns {*}
         */
        function _calcCrossoverPoint(targetPoint, startPoint, endPoint) {
            var crossoverPointX = startPoint.x - ((startPoint.y - targetPoint.y) * (startPoint.x - endPoint.x) / (startPoint.y - endPoint.y));
//            判断交点坐标是否有效,即交点在startPoint,endPoint构成的线段范围内
            if ((startPoint.y < targetPoint.y && endPoint.y >= targetPoint.y) || (endPoint.y < targetPoint.y && startPoint.y >= targetPoint.y)) {
                if ((crossoverPointX >= startPoint.x && crossoverPointX <= endPoint.x) || (crossoverPointX <= startPoint.x && crossoverPointX >= endPoint.x)) {
                    return crossoverPointX;
                } else {
                    return false;
                }
            } else {
                return false;
            }

        }

        var isIn = pointInPolygon({x: 4, y: 4}, [{x: 2, y: 1}, {x: 1, y: 3}, {x: 3, y: 5}, {x: 5, y: 4}, {
            x: 4,
            y: 1
        }, {x: 3, y: 2}, {
            x: 2,
            y: 1
        }]);
        console.log(isIn);
    })(window);

 

转载于:https://my.oschina.net/u/2320308/blog/649915 

 

javascript 判断一个点是否在多边形内(向量的使用)

为什么要检测一个点是否在多边形内,恩,主要是想用在canvas里来模拟底层的点击事件.

要知道,canvas实际上是一个非常简单简洁的api,只提供了几个绘图api,非常底层,要利用这些简单的特性制造复杂的应用,需要一个框架,作为一个动画框架,最重要的除了时间线和精灵的概念,莫属于它的事件机制了.

当我们把一个canvas封装成一个框架的时候,canvas里的东西都会被我们当成一个一个的对象,然后为了操作这些对象,我们需要知道我们的鼠标是否点在了这些对象上,是在拖动对象,还是点击了对象,还是离开了对象,我们需要把这些事件封装出来作为借口提供给框架使用者.

然而,canvas没有给你提供任何事件,从底层来说,canvas内所有的事件都只是一个在canvas上触发的事件,例如canvas被点击了,被拖动了.对于在canvas里你点到了什么,点到了哪里,浏览器并没有提供原生的事件api.于是,我们需要自己来封装.

canvas内的对象千奇百怪,但是从二维角度来说,其实任何对象都是又多边形组成的或者就是一个多边形,这个多边形,我们在程序中用它的顶点作为标记来存储.

先看一个demo吧:

点击打开链接

判断一个点是否在多边形内的算法:

有这样一个算法,假设现在有一个点和一个多边形,这个多边形可以是凸多边形也可以是凹多边形.找到这个点,然后从这个点水平往左画一条射线,方向指向左边,然后你找一下这条射线和多边形的各条边是否相交,统计一下相交的次数,如果相交偶数次,说明点在多边形外面,如果相交奇数次,说明点在多边形内.具体可以多画画试试.

下面的程序中,点标识成对象{x:*,y:*},而多边形则表示成点的数组,可以有任意个点组成.

//计算向量叉乘  


var crossMul=function(v1,v2){


    
    return   v1.x*v2.y-v1.y*v2.x;
    
}


//javascript判断两条线段是否相交  


var checkCross=function(p1,p2,p3,p4){


    
    var v1={x:p1.x-p3.x,y:p1.y-p3.y};
        
    v2={x:p2.x-p3.x,y:p2.y-p3.y};


        
    v3={x:p4.x-p3.x,y:p4.y-p3.y};
        
    v=crossMul(v1,v3)*crossMul(v2,v3);


    
    v1={x:p3.x-p1.x,y:p3.y-p1.y};
    
    v2={x:p4.x-p1.x,y:p4.y-p1.y};


    
    v3={x:p2.x-p1.x,y:p2.y-p1.y};
    
    return (v<=0&&crossMul(v1,v3)*crossMul(v2,v3)<=0)?true:false;


    
}
//判断点是否在多边形内  




var  checkPP=function(point,polygon){
    
    var p1,p2,p3,p4;


    
    p1=point;
    
    p2={x:-100,y:point.y};


    
    var count=0;
    
    //对每条边都和射线作对比  


    
    for(var i=0;i<polygon.length-1;i++){
        
        p3=polygon[i];


        
        p4=polygon[i+1];
        
        if(checkCross(p1,p2,p3,p4)==true){


            
            count++;
            
        }


        
    }
    
    p3=polygon[polygon.length-1];


    
    p4=polygon[0];
    
    if(checkCross(p1,p2,p3,p4)==true){


        
        count++;
        
    }


    
    //  console.log(count)  
    
    return (count%2==0)?false:true;


    
}

 

转载于:http://www.voidcn.com/article/p-slmhuhvg-y.html 

  • 0
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值