让用户删除选定的 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);
}

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

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

Answer 1

编辑：现在适用于旧版本。

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

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

jsfiddle

Answer 2

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

canvas.remove(canvas.getActiveObject());

Answer 3

我正在使用 Fabric JS 2.3.6。

我想允许用户 select canvas 上的一个或多个对象，然后单击删除按钮将其删除。

从旧版本中删除了方法

自从引入 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 4

删除所有选中的对象：

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

Answer 5

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

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

Answer 6

其实很简单。

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

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

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

在进一步改进@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 8

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

this.canvas.getActiveObjects().forEach((o) => {
        this.canvas.remove(o);
    });

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

Let user delete a selected fabric js object

html

javascript

canvas

fabricjs