JSON 序列化在 loadFromJSON 后忽略 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 之前的序列化画布

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 将序列化状态加载到canvas 后，当我们再次序列化对象时，需要明确提及需要包含的自定义字段。

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

loadFromJSON 后序列化画布：

{"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":""}