react-konva中的<Stage>标签的属性以及使用

在React Konva中，`<Stage>`是用于创建一个舞台（Stage）的组件，它是所有Konva图形的容器。下面是一些常用的`<Stage>`标签属性以及它们的使用方法：

- `width`：设置舞台的宽度，可以是一个数字或字符串，例如`width={500}`或`width="50%"`。
- `height`：设置舞台的高度，可以是一个数字或字符串，例如`height={300}`或`height="30vh"`。
- `draggable`：设置舞台是否可被拖动，默认为`false`。如果设置为`true`，则可以通过鼠标拖动舞台。
- `onMouseEnter`：当鼠标进入舞台时触发的事件处理函数。
- `onMouseLeave`：当鼠标离开舞台时触发的事件处理函数。
- `onWheel`：当鼠标滚轮滚动时触发的事件处理函数。
- `onMouseDown`：当鼠标在舞台上按下时触发的事件处理函数。
- `onMouseUp`：当鼠标在舞台上松开时触发的事件处理函数。

以下是一个示例代码，展示了如何使用`<Stage>`组件：

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

const App = () => {
  return (
    <div>
      <Stage width={500} height={300}>
        <Layer>
          <Rect
            x={20}
            y={20}
            width={100}
            height={50}
            fill="red"
            draggable
          />
        </Layer>
      </Stage>
    </div>
  );
};

export default App;

在上面的示例中，我们创建了一个大小为500x300的舞台，并在舞台上添加了一个矩形（Rect）图形，设置其位置为(20, 20)，宽度为100，高度为50，填充颜色为红色，并启用了拖动功能。