我的目标是在fabric.js中获得三个按钮:“复制”、“粘贴”、“删除”。
名称为“复制”的按钮应复制选定的对象。名为“粘贴”的按钮应该粘贴复制的对象。名为" delete“的按钮应从画布中删除选定的对象。
“复制”和“粘贴”按钮有助于处理选定的目标。“复制和粘贴”按钮当时运行良好,“删除”按钮显示错误:
我该如何解决我的问题?
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 style="display:flex;flex-direction:row;"> <canvas id="c" width="1300" height="1300"></canvas> <script src="https://unpkg.com/fabric@4.6.0/dist/fabric.js"></script>
发布于 2021-12-21 21:04:20
错误很明显,您正在得到:
remove is not a function
您应该使用 canvas.remove(object) ,这里是一个工作示例:
canvas.remove(object)
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 style="display:flex;flex-direction:row;">