I have this JSON: https://codepen.io/dhavalsisodiya/pen/RJNNXw
That json has additional property as textAnchor. Now the issue is when ever i am trying to load that json onto canvas, that textAnchor property doesn't get included on canvas object.
You can check the example here: https://codepen.io/dhavalsisodiya/pen/VdYLwo As you can see on canavs textAnchor is not loaded on canvas.
So how to resolve this?
var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';
var canvas1 = new fabric.Canvas('canvas1');
canvas1.loadFromJSON(json);
// re-render the canvas
canvas1.renderAll();
console.log(JSON.stringify(canvas1));<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>Note: I have added textAnchor support using this question: How to use text-anchor : middle in fabric js
Also as per the doc: http://fabricjs.com/fabric-intro-part-3
We extended object's existing toObject method with additional property — "name", so that property is now part of toObject output, and as a result appears in canvas JSON representation. One more thing worth mentioning is that if you extend objects like this, you'll also want to make sure object's "class" (fabric.Rect in this case) has this property in "stateProperties" array, so that loading canvas from string representation would parse and add it to an object correctly.
So not sure which part of js i have to modify?
As in tutorial it's mentioned you can override toobject method to include your custom properties.
fabric.Textbox.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: this.textAnchor
});
};
})(fabric.Textbox.prototype.toObject);
DEMO
var json = '{"version":"2.2.2","objects":[{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":12.5,"top":67.32,"width":382.12,"height":24.86,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1.51,"scaleY":1.87,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{First_Name} {Last_Name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":8.5,"top":150,"width":585,"height":24.86,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{first_name} {last_name}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"},{"type":"textbox","version":"2.2.2","originX":"left","originY":"top","left":7.5,"top":187,"width":587,"height":24.86,"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","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"{address_1}","fontSize":22,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"center","textBackgroundColor":"","charSpacing":0,"minWidth":20,"styles":{},"textAnchor":"middle"}]}';
var canvas1 = new fabric.Canvas('canvas1');
fabric.Textbox.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: this.textAnchor
});
};
})(fabric.Textbox.prototype.toObject);
canvas1.loadFromJSON(json,function(){
// re-render the canvas
canvas1.renderAll();
console.log(JSON.stringify(canvas1));
});<script type="text/javascript" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<body>
<canvas id="canvas1" style="border:1px solid black"></canvas>