Angular 11环境下Fabric JS在HTML5 Canvas添加文本框不显示问题

你把Fabric初始化逻辑写在了组件构造函数中，而Angular构造函数的执行时机远早于模板DOM的渲染挂载阶段——这时候页面上根本还不存在id为myCanvas的canvas节点，Fabric初始化拿到的是无效空实例，哪怕后续调用add方法添加了文本，也没有实际的渲染载体，所以最终只能看到你通过行内样式加的黑色画布边框，看不到任何Fabric绘制的内容。

修复方法 #

所有依赖DOM节点的初始化逻辑，需要移动到Angular的ngAfterViewInit生命周期钩子里执行。这个钩子触发时，组件模板的所有DOM节点已经完成渲染挂载，可以正常获取到canvas元素完成Fabric初始化。

修改后的组件代码：

import { Component, AfterViewInit } from '@angular/core';
import { fabric } from 'fabric';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  title = 'TestProject';
  canvas: any;

  // 移除构造函数中的DOM操作逻辑
  constructor() {}

  ngAfterViewInit(): void {
    // DOM渲染完成后初始化Fabric画布
    this.canvas = new fabric.Canvas('myCanvas');
    // 主动设置文本框初始位置，避免部分版本默认定位异常
    const demoTextbox = new fabric.Textbox('Hello Fabric!', {
      left: 80,
      top: 80,
      width: 220
    });
    this.canvas.add(demoTextbox);
    // 主动触发一次全量重绘，适配Angular环境下的渲染异常场景
    this.canvas.renderAll();
  }
}

常见避坑提示 #

• 安装依赖时尽量保证fabric主包和@types/fabric的大版本匹配，版本差过大容易出现方法调用失效、类型不匹配的问题
• 不要在Fabric Canvas实例初始化完成前调用add方法添加元素，否则元素会被遗漏在渲染队列外
• 检查全局样式，确认没有给canvas元素设置display: none、0透明度等属性，导致绘制内容被遮挡

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