javascript - Fabricjs 恢复修改

Question

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

当我想将 Canvas 的背景更改/切换为任何其他图像时，所有已放入 Canvas 内的图像都应恢复到第一次放入 Canvas 时的状态(其大小、位置、 Angular 等) 。我可以保存每个对象/图像的状态，以便在背景更改时恢复它吗？如何做到这一点？

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

$("#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

这个解决方案怎么样:

每当将新对象添加到 Canvas 时，将 Canvas 数据导出为 JSON:

    savedposition = canvas.toJSON();

在更改 BG 的函数中，只需将保存的位置 JSON 字符串加载回 Canvas ，然后渲染背景:

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

这里有一个 fiddle :http://jsfiddle.net/DanBrown180/sbT3d/