刪除 fabric.js 中的選定對象

Question

我的目標是在 fabric.js 中獲得三個按鈕：“復制”、“粘貼”、“刪除”。

名稱為“復制”的按鈕應該復制選定的對象。 名稱為“粘貼”的按鈕應粘貼復制的對象。 名稱為“刪除”的按鈕應從 canvas 中刪除選定對象。

“復制”和“粘貼”按鈕有助於處理選定的目標。 帶有復制和粘貼的按鈕在當時效果很好，刪除按鈕顯示錯誤：

我應該如何解決我的問題？

 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>

Answer 1

您得到的錯誤很明顯：
remove is not a function

您應該使用canvas.remove(object)這是一個工作示例：

 function Delete() { var activeObject = canvas.getActiveObject() if (activeObject) { canvas.remove(activeObject) } } 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>