react-konva在形状周围绘制矩形

Question

我是react-konva的新手，我在形状周围绘制矩形时遇到问题。此形状是由用户创建的，因此我不知道它的大小，也无法弄清楚如何在此形状周围绘制特殊的矩形。

也许有人和我有同样的问题？这非常令人沮丧，因为我无法在文档中找到任何使我具有这种形状和位置大小的方法。

代码

import React, { Component } from "react";
import { render } from "react-dom";
import { Stage, Layer, Shape, Group, Rect} from "react-konva";


class Rect2 extends Component {
  state = {
    drawRect: false
  }

  handleDrawRect =() => {
    console.log('after clik I want draw rect around this shape', this)
    this.setState({
      drawRect: true
    })
  }
  render() {
    const rect = this.state.drawRect ? 
        <Rect
        x={100}
        y={100}
        width={50}
        height={50}
        fill="transparent"
        stroke={"red"}
        strokeWidth={3}/>
    : []

    return <React.Fragment>
      {rect}
      <Shape
                sceneFunc={(context, shape) => {
                  context.beginPath();
                  context.moveTo(20, 50);
                  context.lineTo(220, 100);
                  context.lineTo(150, 50);
                  context.lineTo(50, 20);
                  context.closePath();
                  // (!) Konva specific method, it is very important
                  context.fillStrokeShape(shape);
                }}
                fill="#00D2FF"
                stroke="black"
                strokeWidth={3}
                name="rectange2"
                onClick={this.handleDrawRect}
      />
      </React.Fragment>
  }
}



class App extends Component {
  render() {
    return (
      <Stage
        width={window.innerWidth}
        height={window.innerHeight}
      >
        <Layer>
          <Group 
          draggable
          name={"Group"}
          >
            <Rect2 />
          </Group>
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById("root"));

请帮助。