让用户删除选定的结构 js 对象

Posted 2023-03-05

【中文标题】让用户删除选定的结构 js 对象

【英文标题】：Let user delete a selected fabric js object

【发布时间】：2015-10-22 00:05:58

【问题描述】：

我有一个简单的基于 fabric 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);

这是我的Fiddle。您现在可以点击新动画，然后添加对象。

我希望用户选择一些对象，然后也可以将其删除，我不知道如何。我找到了这个Delete multiple Objects at once on a fabric.js canvas in html5 但我无法成功实现它。我基本上希望用户能够选择一个对象并将其删除。

【参考方案1】：

自从发布了新版本的 fabric.js - 你应该使用：

canvas.remove(canvas.getActiveObject());

【讨论】：

这仅适用于单个对象。多个选定对象呢？

@rostamiani ，只需使用 canvas.getActiveObjects(); 并循环遍历它们，在循环中调用 canvas.remove() 。比如：while (canvas.getActiveObjects.length > 0) canvas.remove(canvas.getActiveObject[0]);

所以当我调用canvas.remove(object)函数时，对象被删除后，它不会让我在画布上添加新的itext。

【参考方案2】：

编辑：这是现在的旧版本。

你可以使用 remove() 方法，例如。

window.deleteObject = function() 
        canvas.getActiveObject().remove();

jsfiddle

【讨论】：

此答案已过时，不适用于较新版本的 Fabric.js 在此处查看@AlexAndre 的答案：***.com/a/46179274/1697459

【参考方案3】：

删除所有选中的对象：

canvas.getActiveObjects().forEach((obj) => 
  canvas.remove(obj)
);
canvas.discardActiveObject().renderAll()

【参考方案4】：

我正在使用 Fabric JS 2.3.6。

我想让用户在画布上选择一个或多个对象并通过单击删除按钮将其删除。

从旧版本中删除的方法

自从引入 ActiveSelection 后，以下方法不再可用：

setActiveGroup(group);
getActiveGroup();
deactivateAll();
discardActiveGroup();
deactivateAllWithDispatch();

这是我的代码，对我有用，希望对你也有用。

$('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();

【参考方案5】：

其实很简单。

只需使用Fabric's event handling 来管理对象选择，然后为选择的任何对象触发删除功能。

我正在使用画布选择事件来覆盖画布的所有对象。这个想法是添加一个删除按钮，除非需要，否则将其隐藏，然后在画布选择事件上处理它的显示。

在 Fabric 库的 remove 属性的帮助下，删除变得很容易，这显然会在单击删除按钮时触发。

这里有一些示例代码来演示我上面所说的内容。

// Grab the required elements
var canvas = new fabric.Canvas('c'),
    delBtn = document.getElementById('delete')

// Hide the delete button until needed
delBtn.style.display = 'none'

// Initialize a rectangle object
var rect = new fabric.Rect(
  left: 100,
  top: 100,
  fill: 'red',
  width: 100,
  height: 50
)

// Initialize a circle object
var circle = new fabric.Circle(
  left: 250,
  top: 100,
  radius: 20,
  fill: 'purple'
)

// Add objects to the canvas
canvas.add(rect)
canvas.add(circle)

// When a selection is being made
canvas.on(
  'selection:created': () => 
    delBtn.style.display = 'inline-block'
  
)

// When a selection is cleared
canvas.on(
  'selection:cleared': () => 
    delBtn.style.display = 'none'
  
)

// Rmove the active object on clicking the delete button
delBtn.addEventListener('click', e => 
  canvas.remove(canvas.getActiveObject())
)

body 
  background-color: #eee;
  color: #333;


#c 
  background-color: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.4.0/fabric.min.js"></script>

<h4>Select an object</h4>

<canvas id="c"  ></canvas>

<input type="button" id="delete" value="Delete selection">

很简单，不是吗？干杯！

【参考方案6】：

您可以使用退格键删除活动对象

$(document).keydown(function(event)
    if (event.which == 8) 
        if (canvas.getActiveObject()) 
            canvas.getActiveObject().remove();
        
    
);

【讨论】：

过时了？这会引发一个错误......它说没有名为 .remove() 的函数。

你看不到答案何时发布已经1年了。如果你使用的是最新版本的fabric js，那我的错是什么。你应该关注最新的fabric js的官方文档，请关注以下链接fabricjs.com/v2-breaking-changes-2

啊，是的。我可以看到发布日期......只是一个想法......为什么 Larry Roberston 的 .remove() 工作，它比你的代码更老，甚至是 Alex Andre，它比你的代码更老。尽管如此，感谢您提供的文档链接，这非常有用。

2019;为什么是 jQuery？ =)