FabricJS UnGroup

FabricJS UnGroup

by Vijay Gujar

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fabric.min.js"></script>
<canvas id="c" width="450" height="400"></canvas>
<button onclick="window.unGroup()">unGroup</button>
<button onclick="window.doGroup()">doGroup</button>

CSS

#c {
  outline: 1px solid #ccc
}

JavaScript

var canvasOption = {
            canvasName: 'c',
            preserveObjectStacking: true,
            targetFindTolerance: 15,
            renderOnAddRemove: false,
          
            uniScaleKey: "none"
        };

var canvas = new fabric.Canvas('c',canvasOption);

var group = new fabric.Group([
  new fabric.Rect({
    width: 50,
    height: 50,
    left: 50,
    top: 50,
    fill: 'rgb(255,0,0)'
  }),
  new fabric.Rect({
    width: 50,
    height: 50,
    left: 200,
    top: 50,
    fill: 'rgb(255,0,0)'
  })
]);

canvas.add(group);

var Container = function(fabricGroup) {
  var self = this;
}

window.unGroup = function() {
  var items = group._objects;
  group._restoreObjectsState();
  canvas.remove(group);
  for (var i = 0; i < items.length; i++) {
    canvas.add(items[i]);
  }
  canvas.renderAll();
}

window.doGroup = function() {
  var items = group._objects;
  group = new fabric.Group(items);
  canvas.add(group);
  for (var i = 0; i < items.length; i++) {
    canvas.remove(items[i]);
  }
  canvas.renderAll();
}