CODEWITHSUNDEEP
fabricjs
Ayan Misra
Ayan Misra

Reputation: 93

Fabricjs multiple group using same objects with out any conflict

I want to create multiple group using same objects but want them to work independently while I am changing any objects it should not be changed in other group using fabricjs.

As an example, When I am running my fiddle the text is "Default Text" then I am ungrouping it and editing the text,then after group if I add a new group using button then new group text is edited text of previous group,but want it "Default Text" and want both group independent. 

var rectangle = new fabric.Rect({
  width: 100,
  height: 100,
  fill: '#ffcc12',
  opacity: 1
});


var textObject = new fabric.IText("Default Text", {
  left: 0,
  top: 0,
  fontSize: 18,
  fill: '#000000'
});

var group = new fabric.Group([rectangle, textObject], {
  left: 150,
  top: 150
});

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

function regroup() {
  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();
}

Demo

Upvotes: 1

Views: 2398

Answers (1)

Durga
Durga

Reputation: 15614

Create separate object every time. don't relay on the prev created object. While regrouping take the objects from the selection and add in a group, and while removing the group, remove from canvas and add the objects contained by group to canvas.

DEMO 

var canvas = new fabric.Canvas('c');
canvas.renderOnAddition = true;
newGroup();

function newGroup() {
  //Group text and rectangle
  var rectangle = new fabric.Rect({
    width: 100,
    height: 100,
    fill: '#ffcc12',
    opacity: 1
  });

  var textObject = new fabric.IText("Default Text", {
    left: 0,
    top: 0,
    fontSize: 18,
    fill: '#000000'
  });

  var group = new fabric.Group([rectangle, textObject], {
    left: 150,
    top: 150
  });

  canvas.add(group);
};

function removegroup() {
  var obj = canvas.getActiveObject();
  if (!obj || obj.type != 'group') return;

  var items = obj._objects;
  obj.destroy();
  canvas.remove(obj);
  for (var i = 0; i < items.length; i++) {
    canvas.add(items[i]);
  }
  canvas.renderAll();
};

function regroup() {
  var grp = canvas.getActiveGroup();
  if (!grp) return;
  canvas.deactivateAll();
  var items = grp._objects;
  var grp = new fabric.Group(items);
  canvas.add(grp);
  for (var i = 0; i < items.length; i++) {
    canvas.remove(items[i]);
  }
  canvas.renderAll();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
    
<button id="aligntext" onclick="newGroup()">New Group</button> 
<button id="aligntext" onclick="removegroup()">Remove Group</button>
<button id="aligntext" onclick="regroup()">Re Group</button>

Upvotes: 1

Related Questions