Angular Konva 形状教程

所有 ng2-konva 形状组件都映射到带有 ko- 前缀的 Konva 形状，因此您可以通过 config 对象传递任何常规 Konva 形状设置。

此示例展示了几种具有不同样式选项（如阴影、渐变和线条张力）的常见形状。

说明：演示渲染了文本、矩形、圆形和具有渐变填充的闭合线条。

有关更多详细信息，请参阅 Konva API 参考 和 线条 API 参考。

形状示例

import { Component } from '@angular/core';
import { StageConfig } from 'konva/lib/Stage';
import { TextConfig } from 'konva/lib/shapes/Text';
import { RectConfig } from 'konva/lib/shapes/Rect';
import { CircleConfig } from 'konva/lib/shapes/Circle';
import { LineConfig } from 'konva/lib/shapes/Line';

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-text [config]="configText"></ko-text>
        <ko-rect [config]="configRect"></ko-rect>
        <ko-circle [config]="configCircle"></ko-circle>
        <ko-line [config]="configLine"></ko-line>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App {
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configText: TextConfig = {
    text: '画布上的一些文字',
    fontSize: 15
  };
  public configRect: RectConfig = {
    x: 20,
    y: 50,
    width: 100,
    height: 100,
    fill: 'red',
    shadowBlur: 10
  };
  public configCircle: CircleConfig = {
    x: 200,
    y: 100,
    radius: 50,
    fill: 'green'
  };
  public configLine: LineConfig = {
    x: 20,
    y: 200,
    points: [0, 0, 100, 0, 100, 100],
    tension: 0.5,
    closed: true,
    stroke: 'black',
    fillLinearGradientStartPoint: { x: -50, y: -50 },
    fillLinearGradientEndPoint: { x: 50, y: 50 },
    fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
  };
}

Open Sandbox