画线方法

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 

那么，如果它不是新的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设置器将不会更新t/l/w/h属性。 在这种情况下，当您在Line行为中看到一些奇怪的错误时，应该运行setCoords方法，该方法应该在内部更新它需要的所有字段。