在 canvas 中怎么计算不规则图形的面积？-灵析社区
我只爱钱在 canvas 中怎么计算不规则图形的面积？ 在 canvas 中，用鼠标绘制了一个不规则图形，不要第三方js库，怎么计算这个不规则图形的面积？ **要源码**
九久九自己算需要分割三角形，遍历多边形的每个顶点，交叉相乘相应的坐标以找到包围该多边形的区域
«"高斯面积公式
wiki" (https://link.segmentfault.com/?enc=MoVmIvcCUd7MJ8ScgNFBTQ%3D%3D.zgS4wa9X%2BURnkS%2Fe6GveGs4tuvduDz5ywjwmHTjm9j5WH9FhXVUvtF2Cvt77a%2B1vMIHlRJCl41vnK4CD7dRxQ9%2FsE7zNIUDTkiIkCIHwfoc%3D)»
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/3537029ee39f8ed863520719b9d528e0.png)
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/4c7f7db6fdd8dec50549a550a5c1e2d0.png)
公式翻译为代码
function getPolygonArea(points) {
var numPoints = points.length;
var area = 0;
var i, j;
for (var i = 0, j = numPoints - 1; i < numPoints; i++) {
var pi = points[i];
var pj = points[j];
area += (pj.x - pi.x) * (pi.y + pj.y);
j = i;
}
return Math.abs(area / 2);
}
// ex 以A为起点，顺时针。 逆时针也是可以的
var polygonPoints = [
{ x: 5, y: 0 },
{ x: -5, y: -6 },
{ x: -10, y: 2 },
{ x: -2, y: 15 },
{ x: 7, y: 10 },
];
var area = getPolygonArea(polygonPoints);
console.log('多边形的面积为：', area);
注意：方法中的点位必须是按照顺序传入，逆时针 顺时针都行，不能胡乱传入
注意：方法中的点位必须是按照顺序传入，逆时针 顺时针都行，不能胡乱传入
验算：
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241006/19ff5acf5978ead6dc6042f665acaba7.png)
***
用"canvas"库，基本都提供了计算多边形面积的方法
1. Paper.js ："Path" 对象有 "area" 属性，可以用于获取面积。
var path = new Path([point1, point2, point3, ...]);
var area = path.area;
2. Fabric.js ："Polygon" 对象可以用 "getArea" 方法来获取多边形的面积。
var polygon = new fabric.Polygon(points, {
fill: 'red',
});
var area = polygon.getArea();
其他的库你可以自己找找看