javascript - JSON Serialization ignores custom attributes in fabric.js after loadFromJSON - Stack Overflow

admin管理员组

文章数量:1296302

I am running into a strange issue with serialization in fabric.js.

I have created a custom Group object with a couple of custom properties. I have implemented the toObject() method to handle the custom properties.

 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);

I serialize the canvas object to save it. The serialized JSON has the custom attributes.

When I reload the object to canvas, I can see that the object has the custom attributes. However, when I serialize the canvas again, the properties do not get included.

I have created a JSFiddle to demonstrate the issue. /

What is going wrong here? Am I missing something?

Any help would be much appreciated!

I am running into a strange issue with serialization in fabric.js.

I have created a custom Group object with a couple of custom properties. I have implemented the toObject() method to handle the custom properties.

 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);

I serialize the canvas object to save it. The serialized JSON has the custom attributes.

When I reload the object to canvas, I can see that the object has the custom attributes. However, when I serialize the canvas again, the properties do not get included.

I have created a JSFiddle to demonstrate the issue. https://jsfiddle/bbcstar/9x48kk7f/

What is going wrong here? Am I missing something?

Any help would be much appreciated!

• javascript
• json
• serialization
• fabricjs

Share Improve this question Follow asked Oct 3, 2016 at 12:15 BBCBBC 40655 silver badges1212 bronze badges 3

• interesting! I can't spot anything wrong but I'll keep poking at the fabric code and see if I can find anything else. – StefanHayden Commented Oct 3, 2016 at 12:59
• It looks like this is an issue with fabricjs that many people like us had faced - have a look at this article : github./kangax/fabric.js/issues/272 ;] The problem is with the clone of the object. The clone takes only the initial properties and not the groups added with modifications. – dlght Commented Oct 3, 2016 at 13:04
• stackoverflow./a/49650667/14344959 – Harsh Patel Commented Oct 13, 2023 at 6:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Andrea Bogazzi(@asturur) suggested I should be passing an array of custom fields that need to be included for serialization. That helps resolve this specific issue.

However what is still surprising to me is why serialization works fine in the original state without requiring to pass the array.

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

Serialized Canvas before 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":""} 

After loading the serialized state to canvas using loadFromJSON, when we serialize the object again, we need to explicitly mention the custom fields that need to be included.

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

Serialized Canvas after 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":""}

I solve the problem.

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))
});

本文标签： javascriptJSON Serialization ignores custom attributes in fabricjs after loadFromJSONStack Overflow