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

时间:2018-08-18 00:21:29

标签: fabricjs fabricjs2

我以前使用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(不再支持getActiveGroup)重现this code的动作?

1 个答案:

答案 0 :(得分:1)

对多个对象的选择具有类型activeSelection。仅当您使用group

有目的地对多个对象进行分组时,才使用new fabric.Group([ obj1, obj2]类型

使用Shift键而不是绘制选择框来创建多选时,只会在所选的第一个对象上触发selection:created事件,而添加到选择中的对象将触发selection:updated个事件。通过从selection:createdselection: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();
      });
    });
  }
}