FabricJS предоставляет обширный список событий. Начиная с низкоуровневых событий мыши, мы полностью охвачены.

Начиная с этой статьи, я объясню, как мы можем работать с событиями с помощью FabricJS. Это будет частями, так что держитесь крепче и давайте начнем!

Что такое событие в Canvas?

Событие — это происшествие, сообщающее нам о том, что в нашей системе что-то изменилось. От нас зависит, как мы на это реагируем. События могут происходить где угодно. Подобно тому, как события происходят на веб-страницах, события Canvas ничем не отличаются.

Таким образом, когда мы щелкаем на холсте, это событие.

Когда мы поворачиваем что-либо на холсте, это также является событием.

Когда мы перетаскиваем что-тона холст, вы поняли, это тоже Е-В-Е-Н-Т.

Это не так сложно, правда? ~(￣▽￣)~*

Использование метода on()

Поскольку Event API похож на jQuery, Underscore.js и другие библиотеки javascript, вы можете обнаружить некоторое сходство.

Однако, если вы совершенно не знакомы с jQuery или Underscore.js или забыли о них, ничего страшного, мы все равно можем заставить их работать!

Метод on() просто прикрепляет событие к любому выбранному элементу. В данном случае экземпляры.

Добавление событий мыши на холст

В качестве примера я использовал события mouse:up и mouse:down и присоединил их к экземпляру холста с помощью метод on().

Событие mouse:up запускается всякий раз, когда кнопка мыши отпускается. Напротив, событие mouse:down возникает всякий раз, когда нажимается кнопка мыши.

Здесь я создал экземпляр fabric.Canvas и с помощью свойства backgroundColor установил черный цвет фона. Однако я хочу, чтобы его цвет фона менялся на белый, когда происходит событие наведения мыши и красный, когда происходит событие нажатия кнопки мыши. Для обработки этих событий я использовал метод on() для инициализации прослушивателя событий. Далее обработчик меняет цвет фона и записывает вывод для нас в консоль.

     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      canvas.on("mouse:up", () => {
        console.log("mouse up event");
        canvas.setBackgroundColor("white", canvas.renderAll.bind(canvas));
      });

      canvas.on("mouse:down", () => {
        console.log("mouse down event");
        canvas.setBackgroundColor("red", canvas.renderAll.bind(canvas));
      });

События холста, которые реагируют на выбор пользователя

Всякий раз, когда пользователь взаимодействует с объектами на холсте, могут быть активированы события выбора пользователя. Ниже перечислены события, которые запускаются холстом при выборе пользователя.

  1. selection:created — когда пользователь переходит от нет выбора к выбору чего-либо, это событие запускается.
  2. selection:updated — Множественный выбор, переключение с одиночного на множественный выбор или перемещениевыделения с объекта A на B запускает этот событие.
  3. before:selection:cleared — это событие запускается непосредственно перед событием selection:cleared.
  4. selection:cleared: это событие запускается, когда пользователь отменяет выбор объекта или удаляет множественный выбор.

Вот пример кода, чтобы продемонстрировать это:

     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      var rect = new fabric.Rect({
        width: 60,
        height: 80,
        top: 30,
        left: 120,
        fill: "white",
        stroke: "#ffdead",
      });

      var square = new fabric.Rect({
        width: 90,
        height: 90,
        top: 80,
        angle: 14,
        left: 300,
        fill: "#43b3ae",
        stroke: "white",
      });

      canvas.add(rect, square);

      canvas.on("selection:created", (obj) => {
        var selectedObj = obj.target;
        console.log("An object has been selected");
      });

      canvas.on("selection:updated", (obj) => {
        console.log("You have selected the other object");
      });