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

【问题标题】：JSON Serialization ignores custom attributes in fabric.js after loadFromJSONJSON 序列化在 loadFromJSON 之后忽略 fabric.js 中的自定义属性
【发布时间】：2017-02-11 09:17:50
【问题描述】：

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

这里出了什么问题？我错过了什么吗？

任何帮助将不胜感激！

【问题讨论】：

有趣！我没有发现任何错误，但我会继续查看结构代码，看看是否还能找到其他任何东西。
看起来这是许多像我们这样的人都遇到过的fabricjs 问题——看看这篇文章：github.com/kangax/fabric.js/issues/272 ;] 问题出在对象的克隆上。克隆只采用初始属性，而不是添加了修改的组。

标签： javascript json serialization fabricjs

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

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

【讨论】：

我只想说，这很可能是因为新属性不在对象字段“stateProperties”中。如果您将新字段附加到此数组中，它应该可以工作。至少写在这里fabricjs.com/fabric-intro-part-3

【解决方案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))
});

【讨论】：