Angular Konva 图片教程

要在 Angular 中使用 Konva 显示图片，请使用 ko-image 并将加载后的 HTMLImageElement 赋值给 image 属性。

对于 Angular 21 应用，signals 是从 Image.onload 等异步回调更新图片配置的最简单方式。

说明：演示加载外部图片，并在浏览器完成加载后渲染它。

更多详情，请参阅 Image API 参考。

图片示例

import { Component, OnInit, signal } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { ImageConfig } from 'konva/lib/shapes/Image';

import {
  CoreShapeComponent,
  StageComponent,
} from 'ng2-konva';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-image [config]="configImage()"></ko-image>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App implements OnInit {
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configImage = signal<ImageConfig>({
    x: 50,
    y: 50,
    image: null,
    width: 100,
    height: 100
  });

  ngOnInit() {
    const imageObj = new Image();
    imageObj.onload = () => {
      this.configImage.update((config) => ({
        ...config,
        image: imageObj
      }));
    };
    imageObj.src = 'https://konvajs.org/assets/yoda.jpg';
  }
}

Open Sandbox