时间戳

首页 > 解决方案 > FabricJS 选择处理多个对象

javascript - FabricJS 选择处理多个对象

问题描述

我正在努力处理多个对象的选择。期望的行为是每个被单击的对象都将被添加到当前选择中。与按住 shift 键类似，但使用拖动选项的选择也应添加到现有选择中。即使按下 shift 键，fabricjs 的当前行为也会创建一个新的选择。此外，单击画布上的空白区域时不应清除选择。只有在单击作为选择的一部分的单个对象时才能取消选择对象（当拖动选定的对象时应保持选中状态）。或者通过单击一个附加按钮来清除完整的选择（需要额外的用户确认）。

我使用“selection:created”和“selection:updated”尝试了不同的设置，但这要么弄乱了选择，要么导致了无限循环，因为在更新中修改选择也会再次触发更新。

canvas.on("selection:updated", (event) => {
  event.selected.forEach((fabImg) => {
        if (!this.selectedImages.includes(fabImg)) {
          this.selectedImages.push(fabImg);
        }
  });
    var groupSelection = new fabric.ActiveSelection(this.selectedImages);
    canvas.setActiveObject(groupSelection);
});

单击空白画布时防止清除已通过以下方式解决：

var selection = [];
canvas.on("before:selection:cleared", (selected) => {
  selection = this.canvas.getActiveObjects();
});
canvas.on("selection:cleared", (event) => {
  var groupSelection = new fabric.ActiveSelection(selection);
  canvas.setActiveObject(groupSelection);
});

标签： javascriptfabricjsfabricjs2

解决方案

以防万一其他人感兴趣，我最终更改了 fabricjs 代码中的 3 个函数以实现所需的行为：

canvas.class.js：

_shouldClearSelection: function (e, target) {
    var activeObjects = this.getActiveObjects(),
      activeObject = this._activeObject;

    return (
      (target &&
        activeObject &&
        activeObjects.length > 1 &&
        activeObjects.indexOf(target) === -1 &&
        activeObject !== target &&
        !this._isSelectionKeyPressed(e)) ||
      (target && !target.evented) ||
      (target &&
        !target.selectable &&
        activeObject &&
        activeObject !== target)
    );
  }

刚刚删除了是否单击了对象的检查，以在单击空白区域时停止取消选择。

_isSelectionKeyPressed: function (e) {
    var selectionKeyPressed = false;

    if (this.selectionKey == "always") {
      return true;
    }

    if (
      Object.prototype.toString.call(this.selectionKey) === "[object Array]"
    ) {
      selectionKeyPressed = !!this.selectionKey.find(function (key) {
        return e[key] === true;
      });
    } else {
      selectionKeyPressed = e[this.selectionKey];
    }

    return selectionKeyPressed;
  }

只需添加一个名为“always”的“虚拟”键来假装总是按住 shift 键。在画布定义中只需添加这个键：

this.canvas = new fabric.Canvas("c", {
  hoverCursor: "hand",
  selection: true,
  backgroundColor: "#F0F8FF",
  selectionBorderColor: "blue",
  defaultCursor: "hand",
  selectionKey: "always",
});

在 canvas_grouping.mixin.js 中：

_groupSelectedObjects: function (e) {
    var group = this._collectObjects(e),
      aGroup;

    var previousSelection = this._activeObject;
    if (previousSelection) {
      if (previousSelection.type === "activeSelection") {
        var currentActiveObjects = previousSelection._objects.slice(0);
        group.forEach((obj) => {
          if (!previousSelection.contains(obj)) {
            previousSelection.addWithUpdate(obj);
          }
        });
        this._fireSelectionEvents(currentActiveObjects, e);
      } else {
        aGroup = new fabric.ActiveSelection(group.reverse(), {
          canvas: this,
        });
        this.setActiveObject(aGroup, e);
        var objects = this._activeObject._objects.slice(0);
        this._activeObject.addWithUpdate(previousSelection);
        this._fireSelectionEvents(objects, e);
      }
    } else {
      // do not create group for 1 element only
      if (group.length === 1 && !previousSelection) {
        this.setActiveObject(group[0], e);
      } else if (group.length > 1) {
        aGroup = new fabric.ActiveSelection(group.reverse(), {
          canvas: this,
        });
        this.setActiveObject(aGroup, e);
      }
    }
  }

这将在拖动选择时扩展现有组，而不是覆盖现有选择。

推荐阅读