拖放画布形状

要启用画布上任何节点的拖放功能，您只需将 draggable 属性传递给组件。

当您拖放一个形状时，建议将其位置保存到您的应用商店中。您可以使用 onDragMove 和 onDragEnd 事件来实现这一目的。

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

const App = () => {
  const [isDragging, setIsDragging] = React.useState(false);
  const [position, setPosition] = React.useState({
    x: 50,
    y: 50,
  });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text="可拖动文本"
          x={position.x}
          y={position.y}
          draggable
          fill={isDragging ? 'green' : 'black'}
          onDragStart={() => {
            setIsDragging(true);
          }}
          onDragEnd={(e) => {
            setIsDragging(false);
            setPosition({
              x: e.target.x(),
              y: e.target.y(),
            });
          }}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox