该示例创建了一个子类序列化
未捕获的TypeError:无法读取属性' async'未定义的 (匿名函数)@ fabric.js:634fabric.util.enlivenObjects @ fabric.js:627fabric.util.object.extend._enlivenObjects @ fabric.js: 10485fabric.util.object。 extend.loadFromJSON @ fabric.js:10397 (匿名函数)@(索引):134
我无法理解Fiddle
<button id="json">toJSON/loadFromJSON</button>
$(function () {
var canvas = window._canvas = new fabric.Canvas('canvas');
var canvas2 = window._canvas2 = new fabric.Canvas('canvas2');
function MakePoint2(name,id){
var self=this;
self.id=id;
self.name=name;
self.typeName='pointsgroup';
var LabeledCircle = fabric.util.createClass(fabric.Circle, {
type: 'labeledCircle',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('label', options.label || '');
this.set('id', options.id || '');
this.set('name', options.id || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
label: this.get('label'),
id: this.get('id'),
name: this.get('name')
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
//фон
ctx.fillStyle = "rgba(0, 204, 0, 0.3)";
var w=2*12;
var h= 12;
var radius=3;
ctx.fillRect(-w/2, -h-radius-1, w,h);
//надпись
ctx.font = "Italic "+h+"px Helvetica";
ctx.fillStyle = "#ffffff";
ctx.fillText(this.label, -w/4, -radius-3);
}
});
var t=new LabeledCircle({
left: 0,
top: 0,
stroke: "red",
temporary_color: "red",
fill: 'rgba(0, 0, 0, 0)',
radius: 3,
strokeWidth: 4,
originX: "center",
originY: "center",
lockUniScaling : true,
label: self.name,
id: self.id
});
t.set('radius', 3);
t.set('strokeWidth',4);
t.set('left', 100);
t.set('top', 100);
return t;
}
var Pt= MakePoint2('X','1');
Pt.set('left', 100);
Pt.set('top', 100);
canvas.add(Pt);
document.getElementById('json').addEventListener('click', function () {
var json = window._json = canvas.toJSON();
canvas2.loadFromJSON(json, function() {
canvas2.renderAll();
canvas2.forEachObject(function (o) {
//console.log('id', o.id, 'name', o.name, 'isVisible', o.isVisible);
});
});
});
});