关于javascript:鞋带公式计算canvas多边形图形面积

$$
S=\frac{1}{2}\left|\sum_{i=1}^{n}\left(x_{i} y_{i+1}-x_{i+1} y_{i}\right)\right|=\frac{1}{2}\left|\sum_{i=1}^{n} x_{i}\left(y_{i+1}-y_{i-1}\right)\right|
$$

鞋带公式（Shoelace Formula），也称为高斯面积公式。是由 Albrecht Ludwig Friedrich Meister (1724-1788)在 1769 年，基于高斯 (Carl Friedrich Gauss) 和 C.G.J. Jacobi. 的梯形公式提出的。此公式能够简略疾速的得出立体上任意多边形的面积。因为利用多边形坐标进行穿插相乘，像是系鞋带，所以称之为鞋带公式。

因为计算简略，很适宜计算面积时应用。

应用形式是选取多边形一个点做顶点，而后向一个方向程序取坐标（必须是程序的）。之后依照公式进行穿插相乘。计算中如果遇到坐标超出顶点个数范畴时循环取数。

例子

三角形由公式可得固定方程（超出下标时循环取数）：

$$
S_\text{triangle}=\frac{1}{2}\left| x_{1}\left(y_{2}-y_{3}\right) + x_{2}\left(y_{3}-y_{1}\right) + x_{3}\left(y_{1}-y_{2}\right) \right|
$$

代入三角形数据：

$$
A 点：\left(0, 6 \right) \\
B 点：\left(1, 1 \right) \\
C 点：\left(4, 1 \right)
$$

三角形面积求得：

$$

\begin{align}
S_\text{triangle}
&= \frac{1}{2} \left| 0 \cdot \left(1-1\right) + 1 \cdot \left(1-6\right) + 4 \cdot \left(6-1\right) \right| \\
&= \frac{1}{2} \left| -5 + 4 \times 5 \right| \\
&= 7.5
\end{align}

$$

参考资料的链接外面还有举更简单的图形例子。

代码

 const shoelaceFormula = (vertices: Array<{ x: number; y: number}>) => {
  const length = vertices.length;
  let area: number;
  area = vertices.reduce((sum, vertice, i, array) => {
    const afterIndex = i + 1 >= length ? 0 : i + 1;
    const bforeIndex = i - 1 < 0 ? length - 1 : i - 1;
    return sum + vertice.x * (array[afterIndex].y - array[bforeIndex].y);
  }, 0);
  return Math.abs(area) / 2;
};

参考资料

Shoelace formula – Wikipedia

【国内数学比赛】任意多边形面积计算公式

鞋带定理（Shoelace formula）求 2D 多边形面积

几何图形面积公式的倒退简史，从“海伦公式”到“高斯公式”

积分关系定理（格林公式、高斯公式、斯托克斯公式）