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

我想说的是一个bug,但更像是一个文档问题.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>