Angular Konva 缓存教程

缓存会将节点栅格化为内部图像。这可以提高性能，也是滤镜等某些效果的必要条件。

本示例在视图渲染后访问底层 Konva 节点，并手动调用 cache()。

操作说明：本示例显示一个带阴影样式的矩形。视图初始化后，该矩形会被缓存。

有关更多详细信息，请参阅 Node API 参考 和 cache() 文档。

缓存示例

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { RectConfig } from 'konva/lib/shapes/Rect';

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-rect #rect [config]="configRect"></ko-rect>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App implements AfterViewInit {
  @ViewChild('rect') rect!: any;

  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configRect: RectConfig = {
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    fill: 'red',
    shadowBlur: 10,
    shadowColor: 'black',
    shadowOffsetX: 5,
    shadowOffsetY: 5
  };

  ngAfterViewInit() {
    if (this.rect) {
      this.rect.getNode().cache();
    }
  }
}

Open Sandbox