fabricjs 恢复修改

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

在你改变背景的函数中，只需将保存的位置 JSON 字符串加载回画布，然后渲染背景：

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

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