javascript - Fabric.js 取消组合项目更改其位置

标签 javascript fabricjs

您好,我正在尝试使用 Fabric.js 取消组合项目,但每次我尝试取消组合它们时,它们在 Canvas 上的位置都会发生变化。

我尝试了很多技术,甚至尝试手动重新计算位置,但我总是失败。

这篇文章列出了最好的技术

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

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

我有一个 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);
});

作为引用,我想做的是取消对项目的分组并将它们发送到另一个 Canvas 以模拟分组编辑模式。我快到了,但我不知道如何在不失去位置的情况下取消组合。

感谢您的帮助。

最佳答案

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

fabric 的前沿版本解决了这个问题:

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

关于javascript - Fabric.js 取消组合项目更改其位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26633312/

相关文章:

javascript - FabricJS 多 Canvas 处理

javascript - 更新 fabric.Path 中的选择框

javascript从 Canvas 中删除具有唯一属性的多个对象

javascript - 如何将正方形 div 中的内容居中并使用 bootstrap.css 保持纵横比?

javascript - 显示更多/更少的效果

javascript - 排序 HTML 表格长日期

javascript - 如果单击提交按钮,防止执行 onblur 代码

javascript - Selenium webdriver - 解决多个 promise

javascript - 使用 Fabric.js 从矩形区域获取对象并将该区域绘制到 Canvas 上

javascript - 如何居中 FabricJS Canvas 背景图像?