JS-如何判断一个点是否在多边形内

在前端开发中，有时需要判断给定的点是否在多边形内。本文将介绍如何使用 JavaScript 来检测一个点是否在多边形内。我们将会讲解两种常见的方法：射线法和角度法。

射线法

射线法是一种常见的用于解决此类问题的算法，其原理是从点出发向任意方向画一条射线，并计算该射线与多边形的交点数。如果交点数为奇数，则点在多边形内；否则，点在多边形外。

实现步骤

1. 从给定点向右侧绘制一条水平射线
2. 计算射线与多边形的所有边的交点
3. 统计交点数
4. 如果交点数为奇数，则点在多边形内；否则，点在多边形外。

示例代码

-------- ------------------- -- -------- -
  -- -----------
  --- ---- - --------------
  --- ---- - - -- - - --------------- ---- -
    ---- - -------------- ---------------
  -

  -- -------------
  --- ---- - ---- - --
  --- ---- - --

  -- ------------
  --- ------------- - --
  --- ---- - - -- - - --------------- ---- -
    ----- -- - -----------
    ----- -- - ---------- - -- - ----------------

    -- -----------
    -- ------- - ---- -- ----- -- ----- -- ------ - ---- -- ----- -- ------ -
      ----- ------------- - ----- - ----- - ------ - ------ - ------ - ------ - -------

      -- -------------- - ----- -
        ----------------
      -
    -
  -

  ------ ------------- - - --- --
-

角度法

角度法是另一种常见的解决此类问题的算法。其原理是从给定点向多边形的每个顶点绘制一条线段，并计算这些线段与水平方向的夹角。如果所有角度之和等于 $360$ 度，则点在多边形内；否则，点在多边形外。

实现步骤

1. 计算给定点与多边形的每个顶点之间的连线向量。
2. 对于每个向量，计算该向量与水平方向之间的夹角（使用反三角函数）。
3. 将所有夹角相加，得到总和。
4. 如果总和等于 $360$ 度，则点在多边形内；否则，点在多边形外。

示例代码

-------- ------------------- -- -------- -
  --- ---------- - --
  --- ---- - - -- - - --------------- ---- -
    ----- -- - -----------
    ----- -- - ---------- - -- - ----------------

    -- ------
    ----- --- - ----- - --
    ----- --- - ----- - --
    ----- --- - ----- - --
    ----- --- - ----- - --

    -- ----
    ----- ------ - --------------- -----
    ----- ------ - --------------- -----
    --- ----- - ------ - -------

    -- -----
    -- ------ - -------- -

----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------