无法使用 FabricJs 2 管理对象对齐选择

Question

我曾经使用 getActiveGroup 在 FabricJS 上管理对象对齐选择，如下所示：

canvas.on("selection:created", function(e) {
    var activeObj = canvas.getActiveObject();
    console.log('e.target.type', e.target.type);
    if(activeObj.type === "group") {
        console.log("Group created");

        var groupWidth = e.target.getWidth();
        var groupHeight = e.target.getHeight();


        e.target.forEachObject(function(obj) {
            var itemWidth = obj.getBoundingRect().width;
            var itemHeight = obj.getBoundingRect().height;

            $('#objAlignLeft').click(function() {
                obj.set({
                    left: -(groupWidth / 2),
                    originX: 'left'
                });
                obj.setCoords();
                canvas.renderAll();
            });
            ...

    }
}); 

more detailed here

但现在我使用 FabricJS 2 并且 getActiveObject() 已被删除，我不知道该怎么办。我在doc 上读到我们可以使用getActiveObjects()，但它什么也没做。

请问如何使用 FabricJS 2 重现 this code 的操作（不再支持 getActiveGroup）？

Answer 1

多个对象的选择具有activeSelection 类型。 group 类型仅在您使用new fabric.Group([ obj1, obj2] 有目的地对多个对象进行分组时使用

当您使用 shift 键创建多选而不是绘制选择框时，您将仅在第一个选定对象上触发 selection:created 事件，而添加到选择中的对象将触发 @987654326 @ 事件。通过从 selection:created 和 selection:updated 事件中调用对齐代码，您将确保每次创建多选时都会执行您的代码。

此外，您可以使用 getScaledWidth() 和 getScaledHeight() 来获得缩放尺寸，或者如果您只想要未缩放的宽度/高度值，则只需使用 .width 和 .height。祝你好运！

canvas.on({
  'selection:updated': function() {
    manageSelection();
  },
  'selection:created': function() {
    manageSelection();
  }
});

function manageSelection() {
  var activeObj = canvas.getActiveObject();
  console.log('activeObj.type', activeObj.type);
  if (activeObj.type === "activeSelection") {
    console.log("Group created");

    var groupWidth = activeObj.getScaledWidth();
    var groupHeight = activeObj.getScaledHeight();

    activeObj.forEachObject(function(obj) {
      var itemWidth = obj.getBoundingRect().width;
      var itemHeight = obj.getBoundingRect().height;
      console.log(itemWidth);

      $('#objAlignLeft').click(function() {
        obj.set({
          left: -(groupWidth / 2),
          originX: 'left'
        });
        obj.setCoords();
        canvas.renderAll();
      });
    });
  }
}