如何在Angular中为Canvas绑定Resize事件

首先明确：Canvas元素本身不会触发resize事件，这个事件仅属于window对象。你之前直接给Canvas绑定resize事件的方式自然不会生效，下面针对你的场景给出两种可行方案：

方案一：监听绑定的尺寸属性变化 #

既然你是通过修改displayCanvasWidth和displayCanvasHeight来改变Canvas尺寸，直接利用Angular的ngOnChanges钩子监听这两个属性的变化即可：

组件代码示例 #

import { Component, ViewChild, ElementRef, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-canvas-component',
  templateUrl: './canvas-component.component.html'
})
export class CanvasComponent implements OnChanges {
  displayCanvasWidth = 400;
  displayCanvasHeight = 300;

  @ViewChild('canvas', { static: true })
  private displayCanvas: ElementRef<HTMLCanvasElement> | null = null;

  ngOnChanges(changes: SimpleChanges): void {
    // 检测宽度或高度属性是否发生变化
    if (changes['displayCanvasWidth'] || changes['displayCanvasHeight']) {
      this.OnDisplayCanvasSizeChanged();
    }
  }

  public OnDisplayCanvasSizeChanged() {
    alert("Canvas尺寸已更新！");
    if (this.displayCanvas) {
      const canvas = this.displayCanvas.nativeElement;
      console.log('当前宽度:', canvas.width, '当前高度:', canvas.height);
      // 这里可以添加Canvas重绘等逻辑
    }
  }
}

方案二：用ResizeObserver监听容器尺寸变化 #

如果Canvas尺寸是随父容器自适应的（比如父容器响应式变化），可以使用现代浏览器支持的ResizeObserverAPI监听父容器的尺寸变化，同步更新Canvas并触发回调：

组件代码示例 #

import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-canvas-component',
  templateUrl: './canvas-component.component.html'
})
export class CanvasComponent implements AfterViewInit, OnDestroy {
  displayCanvasWidth = 400;
  displayCanvasHeight = 300;

  @ViewChild('canvas', { static: true })
  private displayCanvas: ElementRef<HTMLCanvasElement> | null = null;
  private resizeObserver: ResizeObserver | null = null;

  ngAfterViewInit(): void {
    const canvasContainer = this.displayCanvas?.nativeElement.parentElement;
    if (canvasContainer) {
      this.resizeObserver = new ResizeObserver(entries => {
        for (const entry of entries) {
          // 将Canvas尺寸同步为容器尺寸
          this.displayCanvasWidth = Math.floor(entry.contentRect.width);
          this.displayCanvasHeight = Math.floor(entry.contentRect.height);
          this.OnDisplayCanvasSizeChanged();
        }
      });
      this.resizeObserver.observe(canvasContainer);
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时取消监听，避免内存泄漏
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }

  public OnDisplayCanvasSizeChanged() {
    alert("Canvas容器尺寸变化，已同步更新Canvas！");
    if (this.displayCanvas) {
      const canvas = this.displayCanvas.nativeElement;
      console.log('当前宽度:', canvas.width, '当前高度:', canvas.height);
    }
  }
}

补充说明 #

• 若需兼容旧浏览器，ResizeObserver可以搭配polyfill使用；
• 两种方案可根据你的实际场景选择：如果是主动修改尺寸变量，用方案一；如果是容器自适应变化，用方案二。

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