在loadFromJSON之后，JSON序列化会忽略fabric.js中的自定义属性

Question

我在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/

这是怎么了？ 我想念什么吗？

任何帮助将非常感激！

Answer 1

Andrea Bogazzi（@asturur）建议，我应该传递一系列自定义字段，序列化需要包含这些自定义字段。 这有助于解决此特定问题。

但是令我惊讶的是，为什么序列化在原始状态下可以正常工作而无需通过数组。

var json = JSON.stringify( canvas.toJSON() );

loadFromJSON之前的序列化Canvas

json : {"objects":[{"type":"group","originX":"left","originY":"top","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"objects":[],"includeCField1":true,"includeCField2":false,"includeCField3":false,"includeCField4":true}],"background":""} 

在使用loadFromJSON将序列化状态加载到画布之后，当我们再次序列化对象时，我们需要明确提及需要包括的自定义字段。

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

loadFromJSON之后的序列化Canvas：

{"objects":[{"type":"group","originX":"left","originY":"top","left":0,"top":0,"width":0,"height":0,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,**"includeCField1":true,"includeCField2":false,"includeCField3":false,"includeCField4":true**,"objects":[]}],"background":""}

Answer 2

我解决了问题。

canvas.loadFromJSON(Json, function ()
{
    debugger;
    canvas.renderAll();
    console.log(JSON.stringify(canvas));
    var json = canvas.toJSON(['selectable', 'name', 'ownType', 'ddlValue', 'lockScalingX']);
    console.log(JSON.stringify(json))
});