Skip to content

Instantly share code, notes, and snippets.

@psbolden
Created February 14, 2017 21:51
Show Gist options
  • Save psbolden/498bf976404279a53deed9603ee3cba8 to your computer and use it in GitHub Desktop.
Save psbolden/498bf976404279a53deed9603ee3cba8 to your computer and use it in GitHub Desktop.
fabric.js ungrouping and grouping items
source: http://stackoverflow.com/questions/30904999/grouping-and-ungrouping-fabric-js-objects
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 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;
alert(items);
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();
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment