JSON序列化在loadFromJSON後忽略fabric.js中的自定義屬性

我在運行fabric.js中的序列化時遇到了一個奇怪的問題。JSON序列化在loadFromJSON後忽略fabric.js中的自定義屬性

我已經用一些自定義屬性創建了一個自定義Group對象。我已經實現了toObject（）方法來處理自定義屬性。

var customGrpFieldOptions = { 
     "name":"fabric-custom-grp", 

     "includeCField1" : true, 
     "includeCField2" : false, 
     "includeCField3" : false, 
     "includeCField4" : true 
    }; 

    var customGrpObject = new fabric.Group([], customGrpFieldOptions); 
    customGrpObject.toObject = (function(toObject) { 
    return function() { 
     return fabric.util.object.extend(toObject.call(this), { 
      includeCField1: this.includeCField1, 
      includeCField2: this.includeCField2, 
      includeCField3: this.includeCField3, 
      includeCField4: this.includeCField4 
     }); 
    }; 
    })(customGrpObject.toObject);

我序列化畫布對象來保存它。序列化的JSON具有自定義屬性。

當我將對象重新加載到畫布時，我可以看到對象具有自定義屬性。 但是，當我再次序列化畫布時，屬性不包含在內。

我創建了一個JSFiddle來演示這個問題。 https://jsfiddle.net/bbcstar/9x48kk7f/

這裏怎麼回事？我錯過了什麼嗎？

任何幫助將不勝感激！

來源

2016-10-03 BBC

有趣！我不能發現任何錯誤，但我會一直在檢查結構代碼，看看我能否找到其他的東西。 – StefanHayden

看起來這是許多像我們一樣面臨的fabricjs問題 - 請看這篇文章：https：//github.com/kangax/fabric。js/issues/272;]問題在於對象的克隆。克隆只接受初始屬性，而不是添加修改的組。 – dlght

Andrea Bogazzi（@asturur）建議我應該傳遞需要包含在序列化中的自定義字段數組。這有助於解決這個特定問題。

但是，我仍然感到驚訝的是，爲什麼序列化在原始狀態下工作正常，無需傳遞數組。

var json = JSON.stringify（canvas.toJSON（））;

序列化帆布loadFromJSON之前

JSON：{ 「對象」：[{ 「類型」：「基團」，「originX」：「左」，「originY」：「頂」，「左」：0 ，「頂部」：0，「寬度」：0，「高度」：0，「填充」：「RGB（0,0,0）」，「行程」：NULL，「strokeWidth」：0 「strokeDashArray」：空，「strokeLineCap」：「對接」，「strokeLineJoin」：「斜切」，「strokeMiterLimit」：10 「將scaleX」：1，「的scaleY」：1，「角度」：0 「flipX」：假「flipY 「：假的，」不透明度「：1，」影子「：空，」可見「：真實的，」 clipTo 「：空」的backgroundColor 「：」「」fillRule「：」非零「，」globalCompositeOperation「：」源 - 上方」，「transformMatrix」：空「如果skewX」：0，「skewY」：0，「對象」：[]，「includeCField1」：真「includeCField2」：假「includeCField3」：假「includeCField4」： true}]，「background」：「」}

使用loadFromJSON將序列化狀態加載到畫布後，當我們再次序列化對象時，我們需要明確提及需要包含的自定義字段。

var json2 = JSON.stringify(canvas.toJSON(["includeCField1", "includeCField2","includeCField3","includeCField4"]));

loadFromJSON後序列化畫布： { 「對象」：[{ 「類型」：「基團」，「originX」：「左」，「originY」：「頂」，「左」：0，「頂部」：0，「寬度」：0，「高度」：0，「填充」：「RGB（0,0,0）」，「行程」：NULL，「strokeWidth」：0 「strokeDashArray」：空「strokeLineCap」：「對接」，「strokeLineJoin」：「斜切」，「strokeMiterLimit」：10 「將scaleX」：1，「的scaleY」：1，「角度」：0 「flipX」：假「flipY」：假的，「不透明度」：1，「影子」：空，「可見」：真實的，「clipTo」：空「的backgroundColor」：「」，「fillRule」：「非零」，「globalCompositeOperation」：「源過「，」transformMatrix「：null，」skewX「：0，」skewY「：0,」includeCField1「：true，」includeCField2「：false，」includeCField3「：false，」includeCField4「：true，」objects「： []}]，「background」：「」}

來源

2016-10-04 03:38:41 BBC

JSON序列化在loadFromJSON後忽略fabric.js中的自定義屬性

回答

相關問題