下面是我的问题的stacblitz例子:https://angular-mzoqtk.stackblitz.io(https://stackblitz.com/edit/angular-mzoqtk?file=src%2Fmain.ts)当你点击“添加”文本框被添加,画布被保存到json,当你点击“加载”,json应该被加载,但有一个错误告诉:“无法读取未定义的属性(阅读'fromObject')”
我发现了一些示例,要求编写一个简短的方法来启用Fabric对象的反序列化:
fabric.labeledRect.fromObject = function(object, callback) {
return fabric.Object._fromObject('LabeledRect', object, callback);
}
但是我使用的是angular和typescript,花了几个小时后我不知道如何用angular/typescript的方式实现上面的方法。请帮助。
我试着去实现这样的目标,但没有成功:
TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
type: 'TextboxWithPadding',
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
backgroundColor: this.get('backgroundColor'),
padding: this.get('padding'),
cornerRadius: this.get('cornerRadius')
});
},
fromObject: function(object: any, callback: any) {
return fabric.Object._fromObject('TextboxWithPadding', object, callback);
},
_renderBackground: function(ctx: any) {
if (!this.backgroundColor) {
return;
}
var dim = this._getNonTransformedDimensions();
ctx.fillStyle = this.backgroundColor;
ctx.beginPath();
ctx.roundRect(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding, dim.x + this.padding * 2, dim.y + this.padding * 2, [this.cornerRadius]);
ctx.fill()
ctx.stroke()
this._removeShadow(ctx);
}
});
我也尝试过像这样实现fromObject,但也不起作用:
this.TextboxWithPadding.fromObject = function(object: any, callback: any) {
return fabric.Object._fromObject('TextboxWithPadding', object, callback);
}
我试图在angular/typescript项目中反序列化fabricjs的自定义类。
读取对象时出错,文档中找到的解决方案说应该实现fromObject方法,但我不知道如何使其在Angular 中工作。
我收到了一个建议,建议我应该使用以下代码行将类分配给Fabric全局对象:
fabric.TextboxWithPadding = TextboxWithPadding
但它不起作用。它给出了错误:
类型"导入类型(“/用户/marcinzmigrodzki/文档/angularapps/ll/node_modules/@types/fabric/fabric-impl”)“上不存在属性”带填充的文本框“。”
我知道它在javascript中工作,但我的问题是我需要将它转换为angular/typescript。
1条答案
按热度按时间h79rfbju1#
我在FabricJS Github上得到了帮助:https://github.com/fabricjs/fabric.js/discussions/8631#discussioncomment-4841299解决方案是在加载json之前添加这个: