Fabric.js：`add（）`和`addWithUpdate（）`有什么区别？

Question

var canvas = new fabric.Canvas('canvas');
var a = new fabric.Rect({ width: 20, height: 20 });
var g = new fabric.Group([a]);
canvas.add(g);

var b = new fabric.Rect({ width: 20, height: 20, left: 30 });
g.add(b);
canvas.renderAll();

我希望这段代码能给我两个水平分隔30个像素的正方形。相反，它给了我这个：

当我用g.add()替换上面的g.addWithUpdate()时，我得到了预期的结果。为什么？我不认为我理解文档;他们说addWithUpdate()

  

将对象添加到组中;然后重新计算组的维度，位置。

我不知道小组的维度或位置与此有什么关系。任何人都能解释一下吗？我遇到的真正问题比上面的问题更复杂，但我认为基本上是因为我不理解addWithUpdate()。

Answer 1

我会说这是一个错误，但更像是一个文档问题。 fabric.Group继承自fabric.Collection和fabric.Object。 .add方法来自.Collection，为画布创建更多，并与.Group兼容。

关键是在组中每​​个对象都相对于组中心定位。每个对象的顶部和左侧都会被组中心减去。

addWithUpdate的作用是：

取消组合所有对象 恢复原来的左上角 添加新对象 重新组合它们 - 重新组合时： - 检查所有对象的边界框， - 制作边界框的边界框 - 发挥组的顶部，左侧，宽度和高度， - 减去每个物体的高度和宽度的上半部分和左半部分。

add的作用是： 将对象放在组的_objects数组中

所以到目前为止，仅使用.add将对象添加到组中确实是错误的。

错误较少的是：

创建空组，使用.add()添加所有对象，最后调用空.addWithUpdate()和.setCoords()，如小提琴中所示。

只有当你在.add()方法的另一个调用之间没有任何用户交互的情况下添加大量对象时才应该考虑这一点。

var canvas = new fabric.Canvas('canvas');
var a = new fabric.Rect({ width: 20, height: 20});
var g = new fabric.Group();
canvas.add(g);

var b = new fabric.Rect({ width: 20, height: 20, left: 30, top:0 });
var c = new fabric.Rect({ width: 20, height: 20, left: 60, top:0 });
g.add(b);
g.add(c);
g.add(a);
g.addWithUpdate();
g.setCoords();
canvas.renderAll();

<script src="http://www.fabricjs.com/lib/fabric.js"></script>
<canvas id='canvas'></canvas>