Fabric.js Group 左对齐属性

在使用 Fabric.js 组合图像时，我们可以使用 Group 对象来组合多个形状，再进行统一操作。Group 对象有很多属性可以控制其行为，其中一个重要的属性是对齐属性。在这里我们介绍 Group 的左对齐属性。

左对齐属性可以用来控制 Group 对象内的所有形状相对于 Group 的左边界的位置。属性值为一个数字，代表 Group 左边界到 Group 中所有形状左边界的距离。

var group = new fabric.Group([obj1, obj2], {
  left: 100,
  originX: 'left',
  originY: 'center'
});

在上面的代码片段中，我们创建了一个 Group 对象，包含 obj1 和 obj2 两个形状。其中，left 属性设置为 100，代表这个 Group 对象的左边界距离画布左边界 100 个像素。注意，这里设置的是左边界而非中心点，如果需要设置中心点，需要在 Group 对象上设置 originX 和 originY 属性。

接下来，我们可以使用 setCoords 方法来更新 Group 对象的位置：

group.setCoords();
canvas.renderAll();

通过这些代码，我们就可以实现 Group 对象内所有形状相对于左边界的左对齐效果。

总结

Group 对象可以将多个形状组合在一起，方便统一操作。左对齐属性可以用来控制 Group 对象内所有形状相对于左边界的位置。在使用中需要注意 left 属性设置的是左边界而非中心点，同时需要在 setCoords 方法后重新渲染画布。