CODEWITHSUNDEEP
javascriptfabricjs
inkubux
inkubux

Reputation: 246

Fabric.js Ungroup items change their positions

Hi I'm trying to ungroup items using fabric.js, but everytime I try to ungroup them their position changes on the canvas.

I tried many technique and even tried to manually recalculate the positions but I was always off.

What seams to be the best technique is listed on this post

https://gist.github.com/msievers/6069778

Since the _restoreObjectsState is called by the group.destroy(), I used this instead (both gave me the same results)

I have a jsfiddle that shows that shows the weird behavior.

http://jsfiddle.net/vq3Lj0th/ 

var canvas =  new fabric.Canvas('viewport');

var text1 = new fabric.IText('Text1', {
            left: 0,
            top: 0
});
var text2 = new fabric.IText('Text2', {
            left: 0,
            top: 125
});
var group = new fabric.Group([text1, text2], {
    left: 150,
    top: 100
});
canvas.add(group);

document.getElementById('ungroup').addEventListener('click' ,function ungroup() {

    var destroyedGroup = group.destroy();
    var items = destroyedGroup.getObjects();

    items.forEach(function (item) {
        canvas.add(item);
    });
    canvas.remove(group);
});

as a reference, what i'm trying to do is to ungroup the items and send them to another canvas to simulate group edition mode. i'm almost there but I can't figure how to ungroup things without losing their position.

Thanks for your help.

Upvotes: 2

Views: 1498

Answers (1)

inkubux
inkubux

Reputation: 246

I found a way to make it work:

The bleeding edge version of fabric resolve this issue:

https://github.com/kangax/fabric.js/issues/1798

Upvotes: 3

Related Questions