Angular Konva 过滤器教程

要在 Konva 中应用过滤器，请设置 filters 属性，并在节点挂载后缓存该节点。

此演示在圆形上使用模糊过滤器，并在底层 Konva 节点可用后调用 cache()。

说明：此演示渲染一个模糊的红色圆形。在编辑器中移除 cache() 以查看为何过滤器需要缓存。

了解更多详情，请参阅 过滤器 API 参考 和 cache() 文档。

过滤器示例

import { Component, ViewChild } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { CircleConfig } from 'konva/lib/shapes/Circle';
import Konva from 'konva';

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-circle #circle [config]="configCircle"></ko-circle>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App {
  @ViewChild('circle') circle!: any;
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configCircle: CircleConfig = {
    x: 150,
    y: 150,
    radius: 50,
    fill: 'red',
    filters: [Konva.Filters.Blur],
    blurRadius: 15
  };

  ngAfterViewInit() {
    this.circle.getNode().cache({ offset: 10 });
  }
}

Open Sandbox