canvas - 三角形的画布游戏分离

Question

http://joxi.ru/NDrlaKnT01RamP 目标是确保用户在视觉上可以将三角形分成等份。生成的图形大小应相等，精度为 10%。如何在画布上实现它？有人可以告诉吗？

Answer 1

第 1 部分：绘制原始多边形和细分多边形：

要绘制任何多边形形状（3 边三角形，4,5,6+ 边多边形），您可以使用Konvas.Line. 只需将多边形上每个顶点的点输入它就可以了！

// points[] are the vector points of any polygon

var newTriangle = new Konva.Line({
  points: [220,220,295,140,375,220,222,220],
  stroke: 'black',
  closed : true,
});

这是一个示例，显示您的原始三角形和从原始三角形（您的 3 和 4 边多边形）划分的 2 个新形状：

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 350
});

var layer = new Konva.Layer();
stage.add(layer);

var originalTriangle = new Konva.Line({
  points: [12,220,195,40,375,220,12,220],
  stroke: 'black',
  strokeWidth: 7,
  closed : true
});
layer.add(originalTriangle);

var newQuadrilateral = new Konva.Line({
  points: [12,220,195,40,295,140,220,220,12,220],
  fill: 'gold',
  stroke: 'black',
  strokeWidth: 3,
  closed : true,
  draggable:true,
});
layer.add(newQuadrilateral);

var newTriangle = new Konva.Line({
  points: [220,220,295,140,375,220,222,220],
  fill: 'green',
  stroke: 'black',
  strokeWidth: 3,
  closed : true,
  draggable:true,
});
layer.add(newTriangle);

layer.draw();

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:350px;
}

<script src="https://cdn.rawgit.com/konvajs/konva/0.9.0/konva.min.js"></script>
<h4>The new shapes are draggable (yellow and green)</h4>
<div id="container"></div>

第 2 部分：计算细分多边形的面积

你表示你有数学来计算处理的细分区域，但以防万一这里有一个链接： http: //www.wikihow.com/Calculate-the-Area-of-a-Polygon#Finding_the_Area_of_Irregular_Polygons_sub