Fabricjs, on loadFromJSON the textBox is not gettin editable

user_5595590 0
Viewed 422

I am facing an issue while using FabricJS On using method loadFromJSON, It render the data but textBox text is not editable. Any help? Thanks!

Here is reproducible code jsfiddle

fabricjs reactjs javascript
1 Answers

You need to change the object type from text to i-text.

// Do some initializing stuff
fabric.Object.prototype.set({
  transparentCorners: false,
  cornerColor: 'rgba(102,153,255,0.5)',
  cornerSize: 12,
  padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

var json = '{"version":"3.6.3","objects":[{"type":"i-text","version":"3.6.3","originX":"left","originY":"top","left":100,"top":100,"width":579,"height":114.72,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeMiterLimit":4,"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":"You have probably serialized your objects with one (or more) of them having a custom property  or you created and serialized a new custom class altogether. Have a look here to get a better idea about the rules of Canvas serialization: http://fabricjs.com/docs/fabric.Canvas.html#toJSON;","fontSize":18,"fontWeight":"normal","fontFamily":"Montserrat","fontStyle":"normal","lineHeight":1.16,"underline":false,"overline":false,"linethrough":false,"textAlign":"left","textBackgroundColor":"","charSpacing":0,"minWidth":20,"splitByGrapheme":false,"styles":{}}],"background":"#ffffff"}'

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) {
  //fabric.log(o, object);
});
canvas {
  border: 1px solid #999;
}
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>

http://jsfiddle.net/moshfeu/mtyhreds/

user_8631100
Related