Fabri cJS выбор, обрабатывающий несколько объектов - PullRequest
Новая
       32

Fabri cJS выбор, обрабатывающий несколько объектов

0 голосов
/ 13 июля 2020

Я борюсь с обработкой выбора нескольких объектов. Желаемое поведение будет заключаться в том, что каждый объект, по которому щелкают, будет добавлен к текущему выбору. Подобно удерживанию клавиши Shift, но также к существующему выделению следует добавить выделение с помощью опций перетаскивания. Текущее поведение fabri cjs - создание нового выделения даже при нажатии клавиши Shift. Кроме того, не следует снимать выделение при нажатии на пустое место на холсте. Снятие выделения с объектов должно быть возможно только при щелчке по одному объекту, который является частью выделения (при перетаскивании выделенные объекты должны оставаться выделенными). Или нажав дополнительную кнопку, чтобы очистить полный выбор (с дополнительным подтверждением пользователя).

Я пробовал разные настройки, используя «selection: created» и «selection: updated», но это либо испортило выбор, либо привело к бесконечный l oop, потому что изменение выбора внутри обновления также запускает обновление снова. 

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

1 Ответ

0 голосов
/ 14 июля 2020

На всякий случай, если кому-то еще интересно, я изменил 3 функции в коде fabri cjs для достижения желаемого поведения:

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

просто удалил проверку того, был ли объект нажат, чтобы прекратить отмену выбора при нажатии на пустое место. 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);
      }
    }
  }

Это расширит существующие группы при перетаскивании, а не перезаписывает существующие выбор.

...