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

以上代码可以简化为：

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

Answer 3

要在布料中创建三角形，请不要设置三个顶点。要以这种方式创建三角形，您应该查看polygons或polylines。要创建一个实际的triangle对象，您需要执行以下操作：

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

这是一个有效的fiddle。

修改：在设置位置（top，left）时，这些位置与originX和originY属性相关。

Fabricjs三角管理

3 个答案: