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.addWithUpdate() 替换上面的 g.add() 时，我得到了预期的结果。为什么？我不认为我理解文档；他们说 addWithUpdate()

Adds an object to a group; Then recalculates group's dimension, position.

我不明白小组的规模或职位与此有什么关系。任何人都可以阐明一下吗？我遇到的真正问题比上面那个更复杂，但我想基本上是因为我不明白 addWithUpdate().

Answer 1

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

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

addWithUpdate 所做的是：

取消组合所有对象恢复原来的顶部和左侧添加新对象重新集结他们 --重组时： --检查所有对象的边界框， --制作边界框的边界框 --导出组的顶部、左侧、宽度和高度， --减去每个对象的顶部和左侧一半的高度和宽度。

add 所做的是：将对象放入组

的_objects数组中

所以现在只用 .add 将对象添加到组中确实是错误的。

少错的是：

创建空组，添加所有带有 .add() 的对象，调用一个空的 .addWithUpdate() 和 .setCoords() 最后如 fiddle.

所示

只有在添加大量对象而彼此之间没有任何用户交互的情况下才应考虑这一点 .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>

Fabric.js: `add()` 和 `addWithUpdate()` 有什么区别？

Fabric.js: what is the difference between `add()` and `addWithUpdate()`?

javascript

fabricjs