如何画线

Question

我只是想用Fabric.js绘制一条线，但我不明白构造函数是如何工作的。它说：

initialize(points, options)

canvas = new fabric.Canvas('c', { selection: false, backgroundColor:'#eee' });
slab=new fabric.Rect({ 
  left:100,
  top:100,
  width:700,
  height:400,
  fill:'#c0c0c0',
  originX: 'left', 
  originY: 'top',
  centeredRotation: true,
  selectable:false
});
canvas.add(slab);
line=new fabric.Line([0,0, 200,200], {
    strokeDashArray: [2, 2],
    stroke: 'navy'
});
canvas.add(line);
console.log('X1:'+line.x1+', Y1:'+line.y1+', X2: '+line.x2+', Y2: '+line.y2);
console.log('L:'+line.left+', T:'+line.top+', W: '+line.width+', H: '+line.height);

我在控制台上得到了这个结果：

X1:0, Y1:0, X2: 200, Y2: 200
L:100, T:100, W: 200, H: 200 

如果不是这样，它是如何工作的 new fabric.Line（[point1.x，point1.y，point2.x，point2.y]，options）？

注意：我的画布中已经有了一些矩形

Answer 1

如果我没记错，Fabric会为其大多数对象使用top/left/width/height属性，并且它们在一般Object类中定义，但Line类另外定义了p1 and p2个点

如果要修改Line，则需要更改其要点，但某些Fabric内部功能仍基于常规Object接口。修改其中一个点时，Fabric.Line setter不会更新t/l/w/h属性。在这种情况下，当您在Line行为中看到一些奇怪的错误时，您应该运行setCoords方法，该方法应该更新内部所需的所有字段。