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

在你的函數改變BG，只需加載savedposition JSON字符串回到畫布上，然後渲染背景：

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

這裏有一個小提琴：http://jsfiddle.net/DanBrown180/sbT3d/