CODEWITHSUNDEEP
javascriptcanvasfabricjs
Schwarz
Schwarz

Reputation: 395

How do I make all objects on a FabricJS canvas active but as a group?

I'm trying to make it so whenever a button is clicked, all objects on the canvas are selected and put into a group so they're all manipulated together. I found a good example of the grouping and ungrouping of objects that almost works the way I need, however it requires the user to select the objects they want when I want all objects on the canvas to be grouped/ungrouped.

The example that I found that I was modifying: http://jsfiddle.net/softvar/NuE78/1/

My modified example: http://jsfiddle.net/NuE78/68/

var canvas = new fabric.Canvas('paper', {
  isDrawingMode: true
});
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});
$("#group").on('click', function() {
    var group = new fabric.Group();

  for(var i = 0; i < canvas.getObjects().length; i++) {
    group.addWithUpdate(canvas.getObjects()[i]);
  }
    canvas.setActiveGroup(group);
  canvas.renderAll();
  var activegroup = canvas.getActiveGroup();
  activegroup.clone(function(newgroup) {
    canvas.discardActiveGroup();
    canvas.getObjects().forEach(function(object) {
      canvas.remove(object);
    });
    canvas.add(newgroup);

  });
});

$("#ungroup").click(function() {
  var obj = canvas.getObjects()[0];
  if (obj.type == "group") {
    var items = obj._objects;
    obj._restoreObjectsState();
    canvas.remove(obj);
    for (var i = 0; i < items.length; i++) {
      canvas.add(items[i]);
      canvas.item(canvas.size() - 1).hasControls = true;
    }
    canvas.renderAll();
  }
});

Upvotes: 1

Views: 3490

Answers (2)

Fred Guth
Fred Guth

Reputation: 1667

Grunt's answer works in fabric.js 1.6.1

To make it work on fabric.js 2.2.3:

var canvas = new fabric.Canvas('paper', {
    isDrawingMode: true
});
$("#draw").click(function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
});
$("#group").on('click', function() {
  if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'activeSelection') {
          return;
        }
        canvas.getActiveObject().toGroup();
        canvas.requestRenderAll();
});
$("#ungroup").on('click', function() {
    if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'group') {
          return;
        }
        canvas.getActiveObject().toActiveSelection();
        canvas.requestRenderAll();
});
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  border:1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="paper" width="635" height="198"></canvas>
<button id="draw">Drawing mode</button>
<button id="group">Group</button>
<button id="ungroup">Ungroup</button>

Upvotes: 1

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32859

Here's how you could achieve that ...

var canvas = new fabric.Canvas('paper', {
    isDrawingMode: true
});
$("#draw").click(function() {
    canvas.isDrawingMode = true;
});
$("#group").on('click', function() {
    canvas.isDrawingMode = false;
    selectAllObjects();
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();
    activegroup.clone(function(newgroup) {
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
            canvas.remove(object);
        });
        canvas.add(newgroup);
    });
});
$("#ungroup").click(function() {
    var activeObject = canvas.getActiveObject();
    if (activeObject.type == "group") {
        var items = activeObject._objects;
        activeObject._restoreObjectsState();
        canvas.remove(activeObject);
        for (var i = 0; i < items.length; i++) {
            canvas.add(items[i]);
            canvas.item(canvas.size() - 1).hasControls = true;
        }
        canvas.renderAll();
    }
});

function selectAllObjects() {
    var objs = canvas.getObjects().map(function(o) {
        return o.set('active', true);
    });
    var group = new fabric.Group(objs, {
        originX: 'center',
        originY: 'center'
    });
    canvas._activeObject = null;
    canvas.setActiveGroup(group.setCoords()).renderAll();
}
body {
  margin: 0;
  overflow: hidden;
}
canvas {
  border:1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="paper" width="635" height="198"></canvas>
<button id="draw">Drawing mode</button>
<button id="group">Group</button>
<button id="ungroup">Ungroup</button>

Upvotes: 1

Related Questions