让用户删除选定的 Fabric js 对象

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);
}

这是我的小提琴。您现在可以单击新动画，然后添加对象。

我希望用户选择某个对象，然后也能够删除它，我不知道如何删除。我发现这个在 html5 中的 Fabric.js 画布上一次删除多个对象但是我无法成功实现它。我基本上希望用户能够选择一个对象并将其删除。

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 引入以来，以下方法不再可用：

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();
}

Answer 5

其实很简单。

只需使用 Fabric 的事件处理 来管理对象选择，然后为选择的任何对象触发删除功能。

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

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

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

// 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

在进一步改进@Rahul答案时，我们还可以支持使用“Delete”、“Backscape”等关键事件删除选定的对象。

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

// 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())
})

//Remove using keyboard events
wrapper.addEventListener('keyup', e => {
   if (
      e.keyCode == 46 ||
      e.key == 'Delete' ||
      e.code == 'Delete' ||
      e.key == 'Backspace'
    ) {
      if (canvas.getActiveObject()) {
        if (canvas.getActiveObject().isEditing) {
          return
        }
        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>
<div tabIndex="1000"id="canvasWrapper" @keyup="checkDelete($event)" >
<canvas id="c" width="600" height="200"></canvas>
</div>
<input type="button" id="delete" value="Delete selection">

Answer 7

删除Fabricjs中的对象。这完全没问题。

this.canvas.getActiveObjects().forEach((o) => {
    this.canvas.remove(o);
})
this.canvas.discardActiveObject() // Removes selection box

Answer 8

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

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