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,
});

元の三角形と、元の三角形から分割された 2 つの新しい形状 (3 辺と 4 辺のポリゴン) を示す例を次に示します。

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