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

Question

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

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();
            });
            ...

    }
}); 

更详细的here

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

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

Answer 1

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

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

此外，您可以使用getScaledWidth()andgetScaledHeight()来获得缩放的尺寸，或者.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();
      });
    });
  }
}