canvas - 在fabric js中删除组/所有选定的对象

Question

我正在尝试删除fabric js（版本：2.0.0-beta.7）中的组。
但它只适用于单个对象，那么如何修复它以便它可以删除所有选定的对象？

$('.delete_object').click(function(){
    var activeObject = canvas.getActiveObject();
    if (activeObject.type==='activeSelection') { //For Group selection
        if (confirm('Are you sure?')) {
            var objs = [];
            activeObject.forEach(function(o) {
                objs.push(o);
            });
            canvas.remove(...objs);
        }
    }
    else if (activeObject) {
        if (confirm('Are you sure?')) {
            canvas.remove(activeObject);
        }
    }
});

代码笔： https ://codepen.io/dhavalsisodiya/pen/bLQxKo

脚步

1）尝试添加2个或更多对象
2）选择其中一些
3）现在尝试删除它，它会通过这个错误：TypeError: activeObject.forEach is not a function

Answer 1

使用getActiveObjects获取所有当前选定的对象并从画布中删除。

演示

var canvas = new fabric.Canvas('canvas1');

$('.add_shape').click(function() {
  var cur_value = $(this).attr('data-rel');
  if (cur_value != '') {
    switch (cur_value) {
      case 'rectangle':
        var rect = new fabric.Rect({
          left: 50,
          top: 50,
          fill: '#aaa',
          width: 50,
          height: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1
        });
        canvas.add(rect);
        canvas.setActiveObject(rect);
        break;
      case 'circle':
        var circle = new fabric.Circle({
          left: 50,
          top: 50,
          fill: '#aaa',
          radius: 50,
          opacity: 1,
          stroke: '#000',
          strokeWidth: 1
        });
        canvas.add(circle);
        canvas.setActiveObject(circle);
        break;
    }
  }
});

canvas.on('object:scaling', (e) => {
  var o = e.target;
  o.strokeWidth = o.strokeWidth;
});

$(".add_text").click(function() {
  var add_text = new fabric.IText('Edit Here', {
    left: 20,
    top: 30,
    fontSize: 18,
    editable: true
  });

  canvas.add(add_text);
  canvas.setActiveObject(add_text);
});

$('.delete_object').click(function() {
  var activeObject = canvas.getActiveObjects();
  if (confirm('Are you sure?')) {
    canvas.discardActiveObject();
    canvas.remove(...activeObject);
  }
});

button{
  max-resolution: 10px;
  height:30px;
}
div{
  margin:10px
}
.delete_object{
  background-color:red;
  color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div>
  <button class="add_shape" data-rel="circle">Add Circle</button>

  <button class="add_shape" data-rel="rectangle">Add Rectangle</button>
  
  <button class="add_text">Add Text</button>
  <button class="delete_object">Delete</button>
  
</div>

<canvas id="canvas1" width="600" height="300" style="border:1px solid #000000;"></canvas>

Answer 2

 let activeObjects = canvas.getActiveObjects();
    if (activeObjects.length) {
        if (confirm('Do you want to delete the selected item??')) {
            activeObjects.forEach(function (object) {
                canvas.remove(object);
            });
        }
    }
    else {
        alert('Please select the drawing to delete')
    }