判断一个点是否在多边形内部 [2] 射线法实现

原文出处：http://www.html-js.com/article/1528

看过上一次的思路讲解后，不知道大家思考得怎么样，有没有遇到一些不好处理的特殊情况。今天就来讲讲射线法在实际应用中的一些问题和解决方案。

1. 点在多边形的边上

   前面我们讲到，射线法的主要思路就是计算射线穿越多边形边界的次数。那么对于点在多边形的边上这种特殊情况，射线出发的这一次，是否应该算作穿越呢？

   

   看了上面的图就会发现，不管算不算穿越，都会陷入两难的境地——同样落在多边形边上的点，可能会得到相反的结果。这显然是不正确的，因此对这种特殊情况需要特殊处理。

2. 点和多边形的顶点重合

   

   这其实是第一种情况的一个特例。

3. 射线经过多边形顶点

   射线刚好经过多边形顶点的时候，应该算一次还是两次穿越？这种情况比前两种复杂，也是实现中的难点，后面会讲解它的解决方案。

   

4. 射线刚好经过多边形的一条边

   这是上一种情况的特例，也就是说，射线连续经过了多边形的两个相邻顶点。

   

解决方案：

1. 判断点是否在线上的方法有很多，比较简单直接的就是计算点与两个多边形顶点的连线斜率是否相等，中学数学都学过。

2. 点和多边形顶点重合的情况更简单，直接比较点的坐标就行了。

3. 顶点穿越看似棘手，其实我们换一个角度，思路会大不相同。先来回答一个问题，射线穿越一条线段需要什么前提条件？没错，就是线段两个端点分别在射线两侧。只要想通这一点，顶点穿越就迎刃而解了。这样一来，我们只需要规定被射线穿越的点都算作其中一侧。

   

   如上图，假如我们规定射线经过的点都属于射线以上的一侧，显然点D和发生顶点穿越的点C都位于射线Y的同一侧，所以射线Y其实并没有穿越CD这条边。而点C和点B则分别位于射线Y的两侧，所以射线Y和BC发生了穿越，由此我们可以断定点Y在多边形内。同理，射线X分别与AD和CD都发生了穿越，因此点X在多边形外，而射线Z没有和多边形发生穿越，点Z位于多边形外。

4. 解决了第三点，这一点就毫无难度了。根据上面的假设，射线连续经过的两个顶点显然都位于射线以上的一侧，因此这种情况看作没有发生穿越就可以了。由于第三点的解决方案实际上已经覆盖到这种特例，因此不需要再做特别的处理。

问题都解决了，其实并不复杂，不是吗？啥也不说了，上代码。

  /**   * @description 射线法判断点是否在多边形内部   * @param {Object} p 待判断的点，格式：{ x: X坐标, y: Y坐标 }   * @param {Array} poly 多边形顶点，数组成员的格式同 p   * @return {String} 点 p 和多边形 poly 的几何关系   */  function rayCasting(p, poly) {    var px = p.x,        py = p.y,        flag = false    for(var i = 0, l = poly.length, j = l - 1; i < l; j = i, i++) {      var sx = poly[i].x,          sy = poly[i].y,          tx = poly[j].x,          ty = poly[j].y      // 点与多边形顶点重合      if((sx === px && sy === py) || (tx === px && ty === py)) {        return 'on'      }      // 判断线段两端点是否在射线两侧      if((sy < py && ty >= py) || (sy >= py && ty < py)) {        // 线段上与射线 Y 坐标相同的点的 X 坐标        var x = sx + (py - sy) * (tx - sx) / (ty - sy)        // 点在多边形的边上        if(x === px) {          return 'on'        }        // 射线穿过多边形的边界        if(x > px) {          flag = !flag        }      }    }    // 射线穿过多边形边界的次数为奇数时点在多边形内    return flag ? 'in' : 'out'  }

下一篇讲回转数法。

– P.S. –

本系列共三篇：

1. 射线法思路
2. 射线法实现
3. 回转数法

– 完 –

本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接(http://www.html-js.com/article/1528)，本站和作者保留随时要求删除文章的权利！