我扩展了Fabric Js默认类型:
export class Button extends fabric.Rect {
public text: string;
public textColor: string;
public font = '30px Arial';
public action: ActionEnum;
public type = 'button';
constructor(options: IButttonOptions) {
super(options);
if (options.font) {
this.font = options.font;
}
this.text = options.text;
this.textColor = options.textColor;
this.action = options.action;
}
toDatalessObject(propertiesToInclude?: string[]): any {
propertiesToInclude = (propertiesToInclude || []).concat(
['text', 'textColor', 'font', 'action']
);
return super.toDatalessObject(propertiesToInclude);
}
_render(ctx: CanvasRenderingContext2D) {
super._render(ctx);
console.log('test');
ctx.font = this.font;
ctx.fillStyle = this.textColor;
ctx.textAlign = 'center';
ctx.fillText(this.text, 0, 10);
}
我想像这样对画布进行序列化/反序列化:
var json = canvas.toDatalessJSON();
canvas.clear();
canvas.loadFromJSON(json); // cause error
但是当我想用上面定义的对象加载画布时,出现异常“ klass未定义”
我不知道如何解决此问题。有人可以提供帮助吗?