对于 HTML 5 画布，fabric js 不能在 angular 11 中工作

大佬教程收集整理的这篇文章主要介绍了对于 HTML 5 画布，fabric js 不能在 angular 11 中工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决对于 HTML 5 画布，fabric js 不能在 angular 11 中工作？@H_673_1@ 开发过程中遇到对于 HTML 5 画布，fabric js 不能在 angular 11 中工作的问题如何解决？下面主要结合日常开发的经验，给出你关于对于 HTML 5 画布，fabric js 不能在 angular 11 中工作的解决方法建议，希望对你解决对于 HTML 5 画布，fabric js 不能在 angular 11 中工作有所启发或帮助；

我正在尝试在画布上添加文本框，我正在使用 angular 11 和面料库。 我已经安装的 NPM npm i 面料 npm i @types/fabric

HTML

<canvas ID="myCanvas" wIDth="1000" height="700" style="border:1px solID #000000;">
</canvas>

应用组件

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

@Component({
  SELEctor: 'app-root',templateUrl: './app.component.HTML',styleUrls: ['./app.component.sCSS']
})
export class AppComponent {
title = 'TestProject';

  canvas : any;
  constructor(){
  this.canvas = new fabric.Canvas('myCanvas');
  this.canvas.add(new fabric.TextBox('Hello Fabric!'));
 }
}

当我运行此代码时，只有画布是可见的。

解决方法@H_673_1@

您正在尝试在组件构建期间实例化画布。那时实际的 Canvas 元素在 DOM 上还不可用。您需要在组件的 ngAfterViewInit 生命周期挂钩内运行结构实例化，以确保 Canvas 已准备就绪。像这样：

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;
  ngAfterViewInit() {
    this.canvas = new fabric.Canvas('myCanvas');
    this.canvas.add(new fabric.Textbox('Hello Fabric!'));
  }
}

大佬总结

以上是大佬教程为你收集整理的对于 HTML 5 画布，fabric js 不能在 angular 11 中工作全部内容，希望文章能够帮你解决对于 HTML 5 画布，fabric js 不能在 angular 11 中工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。