我有这个 JSON:https://codepen.io/dhavalsisodiya/pen/RJNNXw
该 json 具有附加属性作为 textAnchor。现在的问题是，每当我尝试将该 json 加载到 Canvas 上时，该 textAnchor 属性不会包含在 Canvas 对象中。
您可以在此处查看示例:https://codepen.io/dhavalsisodiya/pen/VdYLwo 正如您在 canavs 上看到的，textAnchor 未加载到 Canvas 上。
那么如何解决呢？
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>注意:我已经使用这个问题添加了 textAnchor 支持:How to use text-anchor : middle in fabric js
也根据文档: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.
所以不确定我必须修改 js 的哪一部分？
最佳答案
如 tutorial它提到您可以覆盖 toobject 方法以包含您的自定义属性。
fabric.Textbox.prototype.toObject = (function(toObject) {
return function() {
return fabric.util.object.extend(toObject.call(this), {
textAnchor: this.textAnchor
});
};
})(fabric.Textbox.prototype.toObject);
演示
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>关于javascript - loadFromJSON 不包括 fabric js 中的附加属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50601061/