Angular 10中扩展Fabric Text对象后loadFromJSON报fromObject未定义如何解决

这个报错是因为fabric.js执行loadFromJSON反序列化时，会根据JSON中存储的type字段查找对应的类静态fromObject方法来生成实例，你自定义的TextField类没有实现该方法，也没有注册到fabric的全局类映射中，导致无法找到对应的解析逻辑。

你需要补充三处配置即可解决问题：

1. 修正构造函数的super调用逻辑，原写法不符合fabric.Text的构造函数传参规则
2. 给TextField添加静态fromObject方法，实现自定义类的反序列化逻辑
3. 将自定义类注册到fabric的全局对象上，与你设置的type: 'textField'做映射

修改后的完整代码如下：

interface ITextFieldOptions extends fabric.TextOptions {
    fieldname?: string;
}

export interface TextField extends ITextFieldOptions { }

export class TextField extends fabric.Text implements ITextFieldOptions {

  // 新增：静态反序列化方法，fabric加载JSON时会自动调用
  static fromObject(object: any, callback: Function): TextField {
    return callback(new TextField(object));
  }

  public constructor(options: ITextFieldOptions) {
    options.type = 'textField';
    options.text = `{${options.fieldname}}`;
    // 修正super调用，符合fabric.Text的构造函数参数要求
    super(options.text, options);
  }

  toObject(propertiesToInclude?: string[]): any {
    propertiesToInclude = (propertiesToInclude || []).concat(
      ['fieldname']
    );
    return super.toObject(propertiesToInclude);
  }

}

// 新增：将自定义类注册到fabric全局映射，key需与类名保持一致
(fabric as any).TextField = TextField;
// 可选补充：如果fabric版本对type映射规则有差异，可以再加一行别名注册
(fabric as any).textField = TextField;

注意注册代码的执行时机必须早于调用loadFromJSON的时机，建议在Angular项目中，在导入fabric的位置之后就执行注册逻辑，或者在使用canvas的组件初始化阶段完成注册。

内容的提问来源于stack exchange，提问作者Peter Bienek