HTML5 Canvas 拖放事件

要使用 Konva 检测拖放事件，我们可以使用 on() 方法将 dragstart、dragmove 或 dragend 事件绑定到一个节点。 on() 方法需要一个事件类型和一个在事件发生时执行的函数。

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const text = new Konva.Text({
  x: 40,
  y: 40,
  text: '可拖动文本',
  fontSize: 20,
  draggable: true,
  width: 200,
});
layer.add(text);

const status = new Konva.Text({
  x: 40,
  y: 100,
  text: '',
  fontSize: 16,
  width: 200,
});
layer.add(status);

text.on('dragstart', () => {
  status.text('拖动开始');
});

text.on('dragend', () => {
  status.text('拖动结束');
});

text.on('dragmove', () => {
  status.text('拖动中');
});

React

import { Stage, Layer, Text } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [position, setPosition] = useState({ x: 40, y: 40 });
  const [status, setStatus] = useState('');

  const handleDrag = (e, nextStatus) => {
    setPosition({ x: e.target.x(), y: e.target.y() });
    setStatus(nextStatus);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          x={position.x}
          y={position.y}
          text="Draggable Text"
          fontSize={20}
          draggable
          width={200}
          onDragStart={() => setStatus('drag started')}
          onDragEnd={(e) => handleDrag(e, 'drag ended')}
          onDragMove={(e) => handleDrag(e, 'dragging')}
        />
        <Text
          x={40}
          y={100}
          text={status}
          fontSize={16}
          width={200}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text
        :config="textConfig"
        @dragstart="handleDragStart"
        @dragend="handleDragEnd"
        @dragmove="handleDragMove"
      />
      <v-text :config="statusConfig" />
    </v-layer>
  </v-stage>
</template>

<script setup>
import { ref } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const textConfig = {
  x: 40,
  y: 40,
  text: '可拖动文本',
  fontSize: 20,
  draggable: true,
  width: 200
};

const status = ref('');

const statusConfig = {
  x: 40,
  y: 100,
  text: status,
  fontSize: 16,
  width: 200
};

const handleDragStart = () => {
  status.value = '拖动开始';
};

const handleDragEnd = () => {
  status.value = '拖动结束';
};

const handleDragMove = () => {
  status.value = '拖动中';
};
</script>