Когда мы говорим, что что-то было клонировано, это означает, что это было продублировано или скопировано. Методclone() позволяет нам клонировать любой экземпляр. Его первый аргумент — это функция обратного вызова, а второй аргумент — это необязательные свойства Array.

 instanceThatWeWantToClone.clone( callback: function, propertiesToInclude: Array)

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

В своей предыдущей статье я использовал изображение ниже в качестве эскиза. Я использовал объект Text, чтобы добавить эмодзи (😩), но я создал только один объектText! Я знаю, о чем вы думаете, и да, вы правильно поняли. Я клонировал объект Text, чтобы сэкономить время и код.

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

Давайте посмотрим, как мы можем клонировать объект на холсте с помощью FabricJS.

  1. Первый шаг – создать ваш любимый объект. Моего любимого объекта не существует, поэтому я просто создаю круг и текстовый объект, потому что почему бы и нет?
  2. Мы используем метод clone() для клонирования круговых и текстовых экземпляров.
  3. Вы можете видеть, что внутри метода clone() находится стрелочная функция, которая принимает один параметр с именем obj.
     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      // Circle object
      var circle = new fabric.Circle({
        radius: 50,
        fill: "#00bfff",
        top: 60,
        left: 70,
      });

      // cloning the circle object
      circle.clone((obj) => {
        obj.set("top", 55);
        obj.set("left", 95);
        obj.set("fill", "#ff69b4");
        canvas.add(obj);
      });

      // Text object
      var tt = new fabric.Text("🎅", {
        fontSize: 83,
        left: 80,
        top: 180,
      });

      // cloning the text object
      tt.clone((obj) => {
        obj.set("scaleX", 0.5);
        obj.set("scaleY", 0.5);
        obj.set("left", 185);
        canvas.add(obj);
      });

      // Adding them to the canvas
      canvas.add(circle, tt);

Вы можете просто вставить приведенный выше код внутрь тега ‹script›, если не хотите мучиться с его вводом. Вывод должен выглядеть так:

Читайте: Создание холста с помощью FabricJS

Реализация функции копирования-вставки с помощью FabricJS

Код довольно понятен, и я добавил комментарии, объясняющие каждую строку. Но помните, чтобы создать две кнопки и передать функции cpFunc() и pasteFunc() в атрибут события onclick. Кроме того, если вам интересно, я использовал этот веб-сайт для стиля кнопок, и он сделал работу очень-очень быстро.

Методы, используемые в примере ниже:

  • getActiveObject() — возвращает текущий активный объект.
  • discardActiveObject() — удаляет текущий активный объект.
  • set() — сеттер, используемый для установки свойств
  • forEachObject() — выполняет функцию для каждого объекта в этой группе.
  • setCoords() — устанавливает элементы управления углами на основе координат текущего положения, угла, ширины, высоты, слева и сверху.
     var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
        isDrawingMode: false,
      });

      // Initiating Copy function
      function cpFunc() {
        canvas.getActiveObject().clone(function (Obj) {
          copyToClipboard = Obj;
        });
      }

      // Initiating Paste function
      function pasteFunc() {
        copyToClipboard.clone(function (clonedObj) {
          canvas.discardActiveObject();

          // Setting additional properties for the cloned object
          clonedObj.set({
            left: clonedObj.left + 10,
            top: clonedObj.top + 10,
            evented: true,
          });

          // If the object is actively selected only then, add it to the canvas
          if (clonedObj.type === "activeSelection") {
            clonedObj.canvas = canvas;
            clonedObj.forEachObject(function (obj) {
              canvas.add(obj);
            });

            // Setting the corner controls of the cloned object
            clonedObj.setCoords();
          } else {
            canvas.add(clonedObj);
          }

          copyToClipboard.top += 10;
          copyToClipboard.left += 10;

          // The cloned object will be the new active object
          canvas.setActiveObject(clonedObj);

          // Appends a renderAll request
          canvas.requestRenderAll();
        });
      }

      // Circle object
      var circle = new fabric.Circle({
        radius: 50,
        fill: "#ed2939",
        top: 60,
        left: 70,
        stroke: "white",
        strokeWidth: 3,
      });

      // Text object
      var tt = new fabric.Text("🎅", {
        fontSize: 83,
        left: 80,
        top: 180,
      });

      // Adding them to the canvas
      canvas.add(circle, tt);