Reputation: 93
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();
}
Upvotes: 1
Views: 2398
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