delete group / all selected objects in fabric js

Question

I am trying to delete group in fabric js (version: 2.0.0-beta.7).
But its only work for single object, so how to fix it so it can delete all selected objects?

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

codepen: https://codepen.io/dhavalsisodiya/pen/bLQxKo

steps

1) Try to add 2 or more objects
2) Select some of them
3) Now try to delete it, it will through this error: TypeError: activeObject.forEach is not a function

Durga · Accepted Answer · 2018-02-27T13:17:19.637

Get all the current selected objects using getActiveObjects and remove from canvas.

DEMO

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>

@DS9 You no need to initBehavior of text object, it is called already in text object initialisation. — Durga, Feb 27 '18 at 13:18
if you can https://stackoverflow.com/questions/49005241/how-to-scale-object-but-keep-border-as-it-was-in-fabric-js — DS9, Feb 27 '18 at 13:26

score 3 · Answer 2 · answered Aug 09 '18 at 05:25

3

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

answered Aug 09 '18 at 05:25

preeth kumar

31
1

Please add an explanation - a plain code block alone isn't very useful. – CertainPerformance Aug 09 '18 at 05:42

delete group / all selected objects in fabric js

steps

2 Answers2