鞋带公式计算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. 的梯形公式提出的。此公式可以简单快速的得出平面上任意多边形的面积。因为利用多边形坐标进行交叉相乘,像是系鞋带,所以称之为鞋带公式。

image.png

由于计算简单,很适合计算面积时使用。

使用方式是选取多边形一个点做顶点,然后向一个方向顺序取坐标(必须是顺序的)。之后按照公式进行交叉相乘。计算中如果遇到坐标超出顶点个数范围时循环取数。

例子

三角形由公式可得固定方程(超出下标时循环取数):

$$ 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多边形面积

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

积分关系定理(格林公式、高斯公式、斯托克斯公式)


01小径
在路上,遇见了一只BUG,我将它抓住,收藏在了这里。<( ̄︶ ̄)>
651 声望
14 粉丝
0 条评论
推荐阅读
Theia 开发环境搭建
Node.js &gt;= 16.14.0 and &lt; 17.If you are interested in Theia's VS Code Extension support then you should use a Node version at least compatible with the one included in the version of Electron ...

LnEoi1阅读 180

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.4k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.4k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

651 声望
14 粉丝
宣传栏