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

在React Konva中显示用户单击的形状，可以通过以下步骤实现：

首先，确保已经安装了React Konva库，并在项目中引入所需的依赖。
创建一个React组件，用于显示Konva舞台和形状。可以使用Konva的Stage和Layer组件来创建舞台和图层。
在组件的状态中定义一个数组，用于存储用户单击的形状数据。例如，可以使用useState钩子来创建一个名为shapes的状态变量。
在Konva舞台上添加一个点击事件处理程序，以便在用户单击时获取形状的坐标和其他相关信息。可以使用Konva的Circle、Rect等组件来表示形状。
在点击事件处理程序中，将获取到的形状数据添加到shapes数组中。可以使用setShapes函数来更新状态。
在渲染方法中，使用shapes数组中的数据来渲染用户单击的形状。可以使用map方法遍历shapes数组，并为每个形状创建一个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;

在上述示例中，用户在Konva舞台上单击时，会创建一个圆形形状，并将其添加到shapes数组中。然后，通过map方法遍历shapes数组，在舞台上渲染所有的形状。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。对于更复杂的形状和交互，你可以使用Konva提供的其他组件和功能来实现。