JSON Serialization은 loadFromJSON 이후 fabric.js의 사용자 정의 속성을 무시합니다.

Question

fabric.js의 직렬화와 관련하여 이상한 문제가 있습니다.

몇 가지 사용자 지정 속성을 사용하여 사용자 지정 그룹 개체를 만들었습니다. 커스텀 속성을 처리하기 위해 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 { "개체": [{ "타입" "기", "originX"는 "좌측", "originY": "상부"는 "좌측"0 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 ","backgroundColor ":" ","fillRule ":"0이 아닌 값 ","globalCompositeOperation ":"source- null, "skewY": 0, "skewY": 0, "objects": [], "includeCField1": true, "includeCField2": false, "includeCField3": false, "includeCField4": "transformMatrix" true}], "background": ""}

loadFromJSON을 사용하여 직렬화 된 상태를 캔버스에로드 한 후 객체를 다시 직렬화 할 때 포함해야 할 사용자 정의 필드를 명시 적으로 언급해야합니다.

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

loadFromJSON 이후 직렬화 캔버스 : { "개체": [{ "입력", "originX"는 "그룹" "좌", "originY": "상부", "좌측"0, 0, "height": 0, "fill": "rgb (0,0,0)", "stroke": null, "strokeWidth": 0, "strokeDashArray": null "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY", "strokeLineCap": "butt", "strokeLineJoin": "miterLimit" : false, "opacity": 1, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": ""fillRule ":"0이 아닌 값 ","globalCompositeOperation ":"원본 이상 0 ","skewY ": 0, "includeCField1 ": true,"includeCField2 ": false,"includeCField3 ": false,"includeCField4 ": true,"objects ": null,"skewX " []}], "background": ""}