删除fabric.js中选定的对象
删除fabric.js中选定的对象
提问于 2021-12-21 20:27:27
我的目标是在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>
<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>
回答 1
Stack Overflow用户
发布于 2021-12-21 21:04:20
错误很明显，您正在得到：
remove is not a function
您应该使用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>
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70441249
复制相关文章
相似问题
腾讯云开发者
