Mi objetivo es obtener tres botones en fabric.js: "Copiar", "Pegar", "Eliminar".
El botón con el nombre "Copiar" debe copiar los objetos seleccionados. El botón con el nombre "Pegar" debe pegar los objetos copiados. El botón con el nombre "Eliminar" debe eliminar los objetos seleccionados del lienzo.
Los botones "Copiar" y "Pegar" ayudan a trabajar con los objetivos seleccionados. Los botones con copiar y pegar funcionan bien en ese momento, el botón Eliminar muestra un error:
¿Cómo debo solucionar mi problema?
function Copy() { canvas.getActiveObject().clone(function(cloned) { _clipboard = cloned; }); } function Delete() { canvas.getActiveObject().remove(); } function Paste() { _clipboard.clone(function(clonedObj) { canvas.discardActiveObject(); clonedObj.set({ left: clonedObj.left + 10, top: clonedObj.top + 10, evented: true, }); if (clonedObj.type === 'activeSelection') { clonedObj.canvas = canvas; clonedObj.forEachObject(function(obj) { canvas.add(obj); }); clonedObj.setCoords(); } else { canvas.add(clonedObj); } _clipboard.top += 10; _clipboard.left += 10; canvas.setActiveObject(clonedObj); canvas.requestRenderAll(); }); } var canvas = this.__canvas = new fabric.Canvas('c'); var rect = new fabric.Rect({ left: 100, top: 50, fill: '#D81B60', width: 100, height: 100, strokeWidth: 2, stroke: "#880E4F", rx: 10, ry: 10, angle: 45, hasControls: true }); canvas.add(rect); <div> <button type="button" onclick="Copy()">copy</button> <button type="button" onclick="Paste()">paste</button> <button type="button" onclick="Delete()">delete</button> </div> <div style="display:flex;flex-direction:row;"> <div> <canvas id="c" width="1300" height="1300"></canvas> </div> </div> <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>El error es claro que está recibiendo:
remove is not a function
Debería usar canvas.remove(object) aquí hay una muestra de trabajo:
function Delete() { var active = canvas.getActiveObject() if (active) { canvas.remove(active) if (active.type == "activeSelection") { active.getObjects().forEach(x => canvas.remove(x)) canvas.discardActiveObject().renderAll() } } } var canvas = this.__canvas = new fabric.Canvas('c'); var rect = new fabric.Rect({ left: 100, top: 50, fill: '#D81B60', width: 100, height: 100, strokeWidth: 2, stroke: "#880E4F", rx: 10, ry: 10, angle: 45, hasControls: true }); canvas.add(rect); var rect2 = new fabric.Rect({ left: 160, top: 10, fill: '#D81B60', width: 60, height: 60, strokeWidth: 2, stroke: "#880E4F", hasControls: true }); canvas.add(rect2); <div> <button type="button" onclick="Delete()">delete</button> </div> <div style="display:flex;flex-direction:row;"> <div> <canvas id="c" width="1300" height="1300"></canvas> </div> </div> <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>