Angular/TypeScript中FabricJS自定义类反序列化问题求助

问题背景 #

在Angular/TypeScript项目中使用FabricJS时，自定义TextboxWithPadding类并序列化画布为JSON后，加载JSON会抛出错误：Cannot read properties of undefined (reading 'fromObject')。尝试挂载类到全局fabric对象时，又触发TypeScript类型错误：Property 'TextboxWithPadding' does not exist on type 'typeof import(...)'。

解决步骤 #

1. 定义自定义类并实现反序列化方法 #

自定义类需继承Fabric基础对象，同时实现静态的fromObject方法，这是Fabric反序列化自定义对象的核心：

import { fabric } from 'fabric';

export class TextboxWithPadding extends fabric.Textbox {
  padding: number;

  constructor(text: string, options: fabric.ITextboxOptions & { padding?: number } = {}) {
    super(text, options);
    this.padding = options.padding ?? 10;
    this.updatePadding();
  }

  updatePadding() {
    this.set('padding', this.padding);
    this.textAlign = 'center';
    const originalWidth = this.width;
    this.width = originalWidth + this.padding * 2;
    this.left = this.left - this.padding;
  }

  // 实现Fabric要求的反序列化静态方法
  static fromObject(object: any, callback?: (instance: TextboxWithPadding) => void) {
    return fabric.Object._fromObject('TextboxWithPadding', object, callback);
  }
}

2. 扩展Fabric TypeScript类型声明 #

创建fabric.d.ts文件，扩展Fabric的全局类型，解决类型报错问题：

import { TextboxWithPadding } from './path-to-your-custom-class';

declare module 'fabric' {
  namespace fabric {
    interface Fabric {
      TextboxWithPadding: typeof TextboxWithPadding;
    }
  }
}

注意：将./path-to-your-custom-class替换为自定义类实际的文件路径。

3. 注册自定义类到Fabric全局对象 #

在应用初始化位置（如main.ts或Fabric服务中），将自定义类挂载到fabric对象，让Fabric能识别该类型：

import { fabric } from 'fabric';
import { TextboxWithPadding } from './path-to-your-custom-class';

// 注册自定义类
fabric.TextboxWithPadding = TextboxWithPadding;
// 绑定反序列化方法
fabric.TextboxWithPadding.fromObject = TextboxWithPadding.fromObject;

4. 序列化与反序列化的正确调用 #

序列化时需指定保存自定义属性，确保反序列化时能完整恢复对象：

// 保存画布JSON
const canvasJson = canvas.toJSON(['padding']);
localStorage.setItem('canvasData', JSON.stringify(canvasJson));

加载时直接调用loadFromJSON，Fabric会自动调用自定义类的fromObject方法完成反序列化：

// 加载画布JSON
const savedJson = JSON.parse(localStorage.getItem('canvasData') || '{}');
canvas.loadFromJSON(savedJson, () => {
  canvas.renderAll();
});

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