检查一个点是否在多边形中 - Javascript

在开发中，有时我们需要判断一个点是否在多边形中，这在很多场景下都非常有用。这个问题可以通过数学计算来解决，本篇文章将介绍如何使用 Javascript 实现检查一个点是否在多边形中的算法。

算法

判断一个点是否在多边形中，需要遵循以下步骤：

1. 定义多边形的边界
2. 建立一个射线，以该点为起点，与多边形的每一条边相交
3. 计算射线与多边形的边界相交的次数
4. 如果交点数为奇数，则该点在多边形内部，否则在外部

根据算法，我们可以编写以下 JavaScript 代码片段：

/**
 * 检查一个点是否在多边形中
 * @param {Object} point 需要检查的点坐标
 * @param {Array} polygon 多边形的顶点坐标
 * @return {Boolean} 如果点在多边形中，返回 true, 否则返回 false
 */
function checkPointInPolygon(point, polygon) {
  // 初始化计数器
  var intersectionsCount = 0;

  // 获取多边形顶点个数
  var verticesCount = polygon.length;

  for (var i = 0; i < verticesCount; i++) {
    // 获取多边形当前顶点和下一个顶点的坐标
    var vertex1 = polygon[i];
    var vertex2 = polygon[(i + 1) % verticesCount];

    // 将射线长度设为无限大，保证能和多边形的所有边相交
    var ray = {
      x1: point.x,
      y1: point.y,
      x2: Number.MAX_VALUE,
      y2: point.y
    };

    // 计算射线和当前边的交点
    var intersection = getIntersection(ray, { x1: vertex1.x, y1: vertex1.y, x2: vertex2.x, y2: vertex2.y });

    // 如果交点在射线右侧，则忽略
    if (intersection && intersection.x >= point.x) {
      intersectionsCount++;
    }
  }

  // 如果交点数为奇数，则在多边形内部
  return intersectionsCount % 2 !== 0;
}

/* 以下是计算射线和边相交的帮助函数 */

/**
 * 求两条线段的交点
 * @param {Object} line1 线段1的坐标值
 * @param {Object} line2 线段2的坐标值
 * @return {Object} 交点的坐标值
 */
function getIntersection(line1, line2) {
  var denominator =
    (line2.y2 - line2.y1) * (line1.x2 - line1.x1) -
    (line2.x2 - line2.x1) * (line1.y2 - line1.y1);
  if (denominator === 0) {
    return null;
  }
  var ua =
    ((line2.x2 - line2.x1) * (line1.y1 - line2.y1) -
      (line2.y2 - line2.y1) * (line1.x1 - line2.x1)) /
    denominator;
  var ub =
    ((line1.x2 - line1.x1) * (line1.y1 - line2.y1) -
      (line1.y2 - line1.y1) * (line1.x1 - line2.x1)) /
    denominator;
  if (ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1) {
    return {
      x: line1.x1 + ua * (line1.x2 - line1.x1),
      y: line1.y1 + ua * (line1.y2 - line1.y1)
    };
  }
  return null;
}

使用示例

使用上述算法检查一个点是否在多边形中，需要传入一个点的坐标和多边形的顶点坐标，示例如下：

// 多边形的顶点坐标，按顺时针方向排列
var polygon = [
  { x: 10, y: 10 },
  { x: 20, y: 10 },
  { x: 20, y: 20 },
  { x: 10, y: 20 }
];

// 需要检查的点坐标
var point = { x: 15, y: 15 };

// 检查点是否在多边形中
var isInside = checkPointInPolygon(point, polygon);

console.log(isInside); // true，该点在多边形内部

需要注意的问题

1. 多边形的顶点坐标需要按顺时针或逆时针方向排列，否则算法将无法正确判断点是否在多边形内部；
2. 多边形不能有自交的情况，否则算法结果将不可预测。

总结

检查一个点是否在多边形中是一个常见的问题，本文介绍了一种使用 JavaScript 实现的算法。如果你有更好的实现方式或更多的经验，欢迎在评论区分享。