鞋带公式计算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多边形面积

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

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