Fabricjs，在 loadFromJSON 上，文本框不可编辑

Question

我在使用 FabricJS 时遇到问题在使用方法 loadFromJSON 时，它呈现数据但文本框文本不可编辑。有什么帮助吗？谢谢！

这是可重现的代码 jsfiddle

Answer 1

您需要将对象类型从 text 更改为 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/

Fabricjs，在 loadFromJSON 上，文本框不可编辑

Fabricjs, on loadFromJSON the textBox is not gettin editable

javascript

fabricjs

reactjs