获取多边形的面积
索尼娅·马克卢夫
我正在尝试在画布元素中获取多边形绘制的区域
在上图中，我尝试获取具有一些不透明度的红点内的区域。
有没有办法“即时”做到这一点，这意味着每个多边形绘制。
我已经看到了允许三角测量的 earcut.js 但我真的不明白如何获得区域
var canvas = $('canvas');
var context = canvas[0].getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({
width : this.width,
height: this.height
});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clicks = [];
function drawPolygon(){
context.fillStyle = 'rgba(100,100,100,0.5)';
context.strokeStyle = "#df4b26";
context.lineWidth = 1;
context.beginPath();
context.moveTo(clicks[0].x, clicks[0].y);
for(var i=1; i < clicks.length; i++) {
context.lineTo(clicks[i].x,clicks[i].y);
}
context.closePath();
context.fill();
context.stroke();
};
function drawPoints(){
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clicks.length; i++){
context.beginPath();
context.arc(clicks[i].x, clicks[i].y, 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
};
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
drawPolygon();
drawPoints();
};
canvas
.mouseup(function (e) {
clicks.push({
x: e.offsetX,
y: e.offsetY
});
redraw();
});<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>draw polygon with canvas</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="600" height="400"></canvas>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html> 管理层收购
有一个非常简单的算法来计算给定顶点坐标的多边形面积：鞋带公式
A = 1/2* Sum((x[i+1] + x[i]) * ([y[i+1] - y[i]))
(note indexes wrap in circular manner, so x[n]=x[0])
这可能在单个循环中实现。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
MK多边形面积计算
- 2
GeoDjango：确定多边形的面积
- 3
R：计算重叠多边形面积
- 4
计算常规多边形问题的面积
- 5
多边形面积到点
- 6
Postgis：查询以获取面积总和等于42的多个相邻多边形的列表
- 7
从Qvariant获取多边形
- 8
获取通过移动多边形创建的多边形
- 9
给定边长的网格多边形面积
- 10
如何加快多边形面积的计算？
- 11
如何计算地球上自相交多边形的面积
- 12
计算经纬度多边形的面积
- 13
CGAL常规多边形：刚性运动和面积
- 14
在for循环中计算R中多边形的面积
- 15
使用F＃的质心和多边形面积
- 16
如何确定图像中多边形的面积
- 17
使用嵌套多边形数组中的实际面积查找最里面的多边形
- 18
DbGeography多边形获取点
- 19
获取多边形的边界框
- 20
SqlGeography从multipolygon获取多边形
- 21
如何获取Java多边形的边界
- 22
如何从Geoserver获取多边形的Utfgrid？
- 23
从多边形的路径获取latLng失败
- 24
为每个多边形要素生成与每个多边形要素面积成比例的随机点
- 25
Postgis得到一个最小面积的多边形，它将覆盖所有定义的多边形
- 26
如何计算每个多边形具有不同坐标的大量多边形的面积
- 27
我们是根据Nutiteq多边形投影面积计算出的面积吗？或实际表面积？
- 28
如何从多边形内的点获取多边形外的最近点？
- 29
从d3.js中的GeoJson多边形获取每个多边形的质心
我来说两句