Question

我有一个简单的基于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但是我无法成功实现它。我基本上希望用户能够选择一个对象并将其删除。

Answer 1

由于发布了新版本的fabric.js，您应该使用：

canvas.remove(canvas.getActiveObject());

Answer 2

您可以使用remove（）方法，例如

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

jsfiddle

Answer 3

删除所有选定的对象：

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

Answer 4

我正在使用Fabric JS 2.3.6。

我想允许用户在画布上选择一个或多个对象，然后通过单击删除按钮将其删除。

从旧版本中删除了方法

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

test_image = image.load_img('dataset/kot/cat.4003.jpg', target_size = (64, 64))
test_image = image.img_to_array('cat.4003.jpg'(64, 64))
test_image = np.expand_dims('dataset/kot/cat.4003.jpg', axis = 0)

以下是我的代码，它对我和希望您也很有效。

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

Answer 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" width="600" height="200"></canvas>

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

很简单，不是吗？干杯！

Answer 6

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

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

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

6 个答案: