显示用户在react konva中单击的形状

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

const ShapeDisplay = () => {
  const [shapes, setShapes] = useState([]);

  const handleStageClick = (e) => {
    const { offsetX, offsetY } = e.evt;
    const shapeData = {
      x: offsetX,
      y: offsetY,
      radius: 50, // 可根据需求设置形状的属性
    };
    setShapes([...shapes, shapeData]);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {shapes.map((shape, index) => (
          <Circle
            key={index}
            x={shape.x}
            y={shape.y}
            radius={shape.radius}
            fill="red"
          />
        ))}
      </Layer>
    </Stage>
  );
};

export default ShapeDisplay;