Когда мы говорим, что что-то было клонировано, это означает, что это было продублировано или скопировано. Методclone() позволяет нам клонировать любой экземпляр. Его первый аргумент — это функция обратного вызова, а второй аргумент — это необязательные свойства Array.
instanceThatWeWantToClone.clone( callback: function, propertiesToInclude: Array)
Использование метода клонирования()
В своей предыдущей статье я использовал изображение ниже в качестве эскиза. Я использовал объект Text, чтобы добавить эмодзи (😩), но я создал только один объектText! Я знаю, о чем вы думаете, и да, вы правильно поняли. Я клонировал объект Text, чтобы сэкономить время и код.
Но дело не только в просто экономии времени и кода. Клонирование объектов может действительно пригодиться всякий раз, когда мы хотим добавитьфункцию копировать-вставить или дублироватьобъекты, чтобы они могут быть настроены по-разному!
Давайте посмотрим, как мы можем клонировать объект на холсте с помощью FabricJS.
- Первый шаг – создать ваш любимый объект. Моего любимого объекта не существует, поэтому я просто создаю круг и текстовый объект, потому что почему бы и нет?
- Мы используем метод clone() для клонирования круговых и текстовых экземпляров.
- Вы можете видеть, что внутри метода 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);