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中的自定义属性

回答

相关问题