Question

我正在使用fabricjs创建应用程序，用户可以将宠物拖动到具有背景图像的画布上，并进行旋转，缩放等修改。

当我想要将画布的背景更改/切换到任何其他图像时，已经放入画布内的所有图像都应该恢复到第一次掉落到画布时的状态（其大小，位置，角度等）。我可以保存每个对象/图像的状态，以便在背景改变时恢复它，以及如何进行恢复吗？

这是我用来更改背景的代码

$("#change-bg").on("click", function(){
        canvas.setBackgroundImage("assets/images/sofa.jpg", function(){
            canvas.renderAll();
            // restore all objets states
            // ... don't have any idea yet
        });
    });

Answer 1

解决方案如何：

每当将新对象添加到画布时，将画布数据导出为JSON：

    savedposition = canvas.toJSON();

在更改BG的功能中，只需将savedposition JSON字符串重新加载到画布上，然后渲染背景：

    canvas.loadFromJSON(savedposition,canvas.renderAll.bind(canvas));

这里有一个小提琴：http://jsfiddle.net/DanBrown180/sbT3d/

fabricjs恢复修改

1 个答案: