Fabricjs三角管理

Question

如何從三個left和top與fabricjs構成正確的三角形。我試圖用width和height做一些事情，但結果不是預期的。例如：我們有[{left：50，top：50}，{left：40，top：60}，{left：60，top：60}]，我們如何創建一個帶有該值的三角形？

Answer 1

canvas = new fabric.Canvas('canvas'); 
 
var p1 = {left:50,top:50}; var p2 = {left:40,top:60}; var p3 = {left:60,top:60}; 
 
var shape = new fabric.Polygon([{x:p1.left, y:p1.top},{x:p2.left, y:p2.top},{x:p3.left, y:p3.top}]); 
 
canvas.add(shape);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

可以創建fabric.Polygon（[陣列點...]）;

每個點必須具有「x」和「y」屬性。

Answer 2

要在面料中創建三角形，您不要設置三個頂點。要創建一個三角形，你應該看看polygons或polylines。要創建你想要做這樣的事情的實際triangle對象：

var triangle = new fabric.Triangle({ 
    width: 20, height: 30, fill: 'blue', left: 50, top: 50 
}); 

這裏的工作fiddle。

編輯：在設置位置（top，left）時，這些是相對於originX和originY屬性。

Answer 3

上述代碼可以simplized到：

canvas = new fabric.Canvas('canvas'); 
var p1 = {x:50,y:50}, p2 = {x:40,y:60}, p3 = {x:60,y:60}; 
var shape = new fabric.Polygon([p1, p2, p3]); 
canvas.add(shape);