保存並加載回畫布時缺少織物js-擴展到Object方法並添加了其他屬性

我創建了一個具有矩形和文本的織物組。最後Iam使用下面的代碼將一個自定義屬性「name」添加到組類中。
Iam使用JSON.stringify（canvas）將畫布數據序列化爲JSON，並將Json字符串發送給java，最後將Json字符串保存到文件中，自定義屬性也與文件一起保存。保存並加載回畫布時缺少織物js-擴展到Object方法並添加了其他屬性

var rect1= createRect(104,166,250,15); 


     var text1 = new fabric.Text('hello', { left: rect1.get('left'), top: rect1.get('top'),fontSize: 13 }); 

     var group1=new fabric.Group([rect1,text1]); 

     group1.toObject = (function(toObject) { 
      return function() { 
      return fabric.util.object.extend(toObject.call(this), { 
       name: this.name 
      }); 
      }; 
     })(group1.toObject); 

     canvas.add(group1); 

     group1.name = 'New group';

蔭使用Java和嘗試負載JSON轉換成這樣canvas.loadFromJSON帆布讀同一文件（jsonVal）我的自定義屬性丟失。帶有矩形和文本的Json組只能使用默認屬性加載。

如何將Json字符串加載回畫布而不會丟失自定義屬性有人可以幫助我這個。

來源

2017-09-27 Shakthi

您添加名稱屬性組只，而不是文本和矩形。這裏沒有定義其他定製屬性。 – Durga

是的，我已經爲組對象添加了name屬性。但事情是一旦將畫布轉換爲Json字符串，並且當我嘗試將相同的Json 字符串加載到畫布中時，我發現我爲組添加的自定義屬性'name'缺失。如何將Json字符串加載到畫布中而不會丟失我的用於組的自定義屬性？ – Shakthi

按照Fabricjs文檔https://github.com/kangax/fabric.js/wiki/Adding-additional-object-properties-to-serialized-JSON

屬性應該從fabric.Object的toObject方法或從更具體的「類」的toObject方法返回。

因此，您要麼將屬性添加到fabric.Object的toObject方法，要麼將其添加到fabric.Group的toObject方法的。您無法將其作爲group1添加到對象，因爲group1在加載時不是JSON字符串中的有效引用。

所以，這應該工作（我試了一下）：

fabric.Group.prototype.toObject = (function(toObject) { 
      return function() { 
      return fabric.util.object.extend(toObject.call(this), { 
       name: this.name 
      }); 
      }; 
     })(fabric.Group.prototype.toObject);

來源

2017-10-01 10:30:53 mikkaye

非常感謝你:) mikkaye解決方案:) – Shakthi

快樂我可以幫助Sakthi，謝謝接受答案。 – mikkaye

保存並加載回畫布時缺少織物js-擴展到Object方法並添加了其他屬性

回答

相關問題