Fabricjs三角管理

Question

如何从三个 left 和 top 中用 fabricjs 做出正确的三角形。我尝试用 width 和 height 做一些事情，但结果不是预期的。示例：我们有 [{left:50,top:50},{left:40,top:60},{left:60,top:60}]，我们如何创建具有该值的三角形？

Answer 1

要在布料中创建三角形，您无需设置三个顶点。要以这种方式创建三角形，您应该查看要执行以下操作的 polygons or polylines. To create an actual triangle 对象：

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

这是一个有效的 fiddle。

编辑：在设置位置（top、left）时，这些是相对于originX和originY属性的。

Answer 2

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 3

以上代码可以简化为：

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

Fabricjs三角管理

Fabricjs triangle management

fabricjs