Javascript 让用户删除选定的结构 js 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31727049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Let user delete a selected fabric js object
提问by Ian
I have a simple fabric js based application where I will let users add shapes connect them and animate them.
我有一个简单的基于 fabric js 的应用程序，我将让用户添加形状来连接它们并为它们设置动画。
Following is my JS
以下是我的JS
var canvas;
window.newAnimation = function(){
canvas = new fabric.Canvas('canvas');
}
window.addRect = function(){
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
});
canvas.add(rect);
}
window.addCircle = function(){
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
canvas.add(circle);
}
This is my Fiddle. You can click on new animation and then add objects as of now.
这是我的小提琴。您可以单击新动画，然后从现在开始添加对象。
I want the user to select some object and then also be able to delete it I am not sure how. I found this Delete multiple Objects at once on a fabric.js canvas in html5But i was not able to implement it successfully. I basically want users to be able to select an object and delete it.
我希望用户选择一些对象，然后也能够删除它我不知道如何。我在 html5 中的 fabric.js 画布上发现了一次 Delete multiple Objects但我无法成功实现它。我基本上希望用户能够选择一个对象并将其删除。
回答by Alex Andre
Since new version of fabric.js was released - you should use:
由于发布了新版本的 fabric.js - 你应该使用：
canvas.remove(canvas.getActiveObject());
回答by Ian
回答by cby016
Delete all selected objects:
删除所有选定的对象：
canvas.getActiveObjects().forEach((obj) => {
canvas.remove(obj)
});
canvas.discardActiveObject().renderAll()
回答by Larry Robertson
I am using Fabric JS 2.3.6.
我正在使用 Fabric JS 2.3.6。
I wanted to allow the user to select one or more objects on the canvas and delete them by clicking the delete button.
我希望允许用户在画布上选择一个或多个对象并通过单击删除按钮删除它们。
Removed methods from old versions
从旧版本中删除方法
The following methods are no longer available since the introduction of ActiveSelection:
自从引入 ActiveSelection 后，以下方法不再可用：
setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();
Here is my code that works great for me and hopefully you as well.
这是我的代码，对我很有用，希望你也能用。
$('html').keyup(function(e){
if(e.keyCode == 46) {
deleteSelectedObjectsFromCanvas();
}
});
function deleteSelectedObjectsFromCanvas(){
var selection = canvas.getActiveObject();
if (selection.type === 'activeSelection') {
selection.forEachObject(function(element) {
console.log(element);
canvas.remove(element);
});
}
else{
canvas.remove(selection);
}
canvas.discardActiveObject();
canvas.requestRenderAll();
}
回答by Soubhagya Kumar Barik
you can delete active object by using backspace key
您可以使用退格键删除活动对象
$(document).keydown(function(event){
if (event.which == 8) {
if (canvas.getActiveObject()) {
canvas.getActiveObject().remove();
}
}
});
