Fabric.js取消组合项目会改变其位置

时间:2014-10-29 14:42:46

标签: javascript fabricjs

您好我正在尝试使用fabric.js取消组合项目,但每当我尝试将它们在画布上的位置更改取消组合时。

我尝试了很多技巧,甚至试图手动重新计算位置,但我总是关闭。

这篇文章列出了哪种接缝是最好的技术

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

由于group.destroy()调用_restoreObjectsState,我使用了它(两者都给了我相同的结果)

我有一个显示奇怪行为的jsfiddle。

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);
});

作为参考,我正在尝试的是取消组合项目并将它们发送到另一个画布以模拟组编辑模式。我几乎在那里,但我无法想象如何在不失去位置的情况下解开组合。

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我找到了让它发挥作用的方法:

最新版本的结构解决了这个问题:

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