Angular Konva 拖放教程

要使形状可拖放，请在其配置中设置 draggable: true 并监听节点上的拖放事件。

此示例在开始拖动时将拖动的圆形移动到其图层的最顶层。

说明：在舞台上拖动圆形，并注意当您开始拖动时它会被带到最顶层。

有关更多详细信息，请参阅 Node API 参考 和 Circle API 参考。

拖放示例

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

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ko-stage [config]="configStage">
      <ko-layer>
        <ko-circle
          [config]="configCircle"
          (dragstart)="handleDragstart($event)"
        ></ko-circle>
      </ko-layer>
    </ko-stage>
  `,
  imports: [StageComponent, CoreShapeComponent],
})
export default class App {
  public configStage: StageConfig = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  public configCircle: CircleConfig = {
    x: 100,
    y: 100,
    radius: 70,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true,
  };

  public handleDragstart(event: any): void {
    event.target.moveToTop();
  }
}

Open Sandbox