Как прикрепить прослушиватели событий непосредственно к объектам холста?

В предыдущей статье мы добавили на холст события мыши, благодаря чему узнали, как обрабатывать события, происходящие из-за взаимодействия пользователя с мышь.

Когда мы пишем canvas.on() и присоединяем события к холсту, это означает, что конкретное событие ограничено этим экземпляр холста.

Таким образом, если бы у нас было два холста, экземплярами которых были скажем, canvas1 и canvas2, мы могли бы прикрепить к ним разные обработчики событий, не наткнувшись на ошибку. . Это связано с тем, что экземпляры уважаюттолько события, назначенные им.

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

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

      canvas1.on("mouse:down", () => {
        console.log("This is canvas1");
      });

      canvas2.on("mouse:down", () => {
        console.log("This is canvas2");
      });

Прикрепите прослушиватели событий к объектам

Слушатель событий «перекоса»

Точно так же, как мы можем прикрепить прослушиватели событий к экземплярам холста с помощью метода on(), мы можем сделать то же самое с другими объектами холста. Итак, это означает, что приведенный ниже код полностью действителен:

      var skewFunction = function () {
        canvas.renderAll();
        tri.animate("strokeWidth", "+=8", {
          onChange: canvas.renderAll.bind(canvas),
          easing: fabric.util.ease.easeOutExpo,
        });
      };

      tri.on("skewing", skewFunction);

В приведенном выше коде tri — это экземпляр треугольника, к которому я добавил прослушиватель событий skewing. Кроме того, я создал обработчик событий под названием skewFunction, который будет вызываться каждый раз, когда мы наклоняем треугольник.

Примечание. Вы можете наклонить объект на холсте, нажав клавишу Shift и перетащив элементы управления.

skewFunction inturn — это функция, которая анимирует треугольник. Когда мы говорим tri.animate и передаем ему аргументы strokeWidth и +=8, это означает, что его ширина обводки будет увеличивается на 8 каждый раз, когда происходит перекос.

Вот полный код:

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

      // Initiating a triangle instance
      var tri = new fabric.Triangle({
        top: 20,
        left: 90,
        width: 80,
        height: 200,
        fill: "blue",
        stroke: "white",
        strokeWidth: 1,
      });

      // Adding the tri instance to the canvas
      canvas.add(tri);

      // This is the event handler
      var skewFunction = function () {
        canvas.renderAll();
        tri.animate("strokeWidth", "+=8", {
          onChange: canvas.renderAll.bind(canvas),
          easing: fabric.util.ease.easeOutExpo,
        });
      };

      // when skewing event occurs, call skewFunction
      tri.on("skewing", skewFunction);

Увеличение радиуса круга при его перемещении

Вместо создания обработчика мы можем использовать старую добрую стрелочную функцию вот так:

      // Initiating a circle instance
      var circle = new fabric.Circle({
        top: 20,
        left: 90,
        radius: 6,
        fill: "#e6e6fa",
        stroke: "#9966cc",
        strokeWidth: 16,
      });

      // Adding the circle instance to the canvas
      canvas.add(circle);

      // Using an arrow function in the second argument
      circle.on("moving", () => {
        canvas.renderAll();
        circle.animate("radius", "+=7", {
          onChange: canvas.renderAll.bind(canvas),
          easing: fabric.util.ease.easeOutSine,
        });
      });

Это похоже на предыдущий пример, за исключением того, что радиусувеличивается на 7 всякий раз, когда мы перемещаем кругна холсте. Поскольку изначально радиус был равен 6, при перемещении его один раз его радиус изменится на 13, и он будет только увеличиваться при перемещении. !

Надеюсь, вы уловили идею. Другие прослушиватели событий также могут быть прикреплены к экземплярам объектов, подобным этому. То есть это будут выделено, снято выделение, перемещение, наклон, вращение, изменение и т. д.