如何在 React Konva 中的矩形內添加文本？

Question

我正在使用 React Konva 繪制形狀。 我想在最后一個矩形內插入一個問號。 我正在使用的代碼如下。 但它並不完全有效：

<Grid item xs={12} lg={3} style={{border:'5px 5px 5px 5px solid white'}}>
    <Stage width={1200} height={1200}>

      <Layer>
      
        <RegularPolygon
          sides={3}
          x={50}
          y={100}
          width={100}
          height={100}
          stroke="orange"
        />

<RegularPolygon
          sides={3}
          x={200}
          y={100}
          width={100}
          height={100}
        //   fill="red"
          stroke="#00FFFF"
        />

<Rect
        
          x={300}
          y={50}
          width={80}
          height={80}
       
          stroke="orange"
        //   shadowBlur={5}
        />
  <Group x={450} y={30}>
<Rect
          x={430}
          y={40}
          width={100}
          height={100}
        
          stroke="white"
          strokeWidth={5}
          
        >
          <Text
                  fontSize={20}
                  text="?"
                  stroke='white'
                  strokeWidth={5}
                  align="center"
                />
        </Rect>
        </Group>
      </Layer>
    </Stage>
    </Grid>

我已經添加了帶有文本的組標簽以使其工作，但它不起作用。

Answer 1

您是否嘗試過不使用Rect包裝Text並將x & y道具添加到Text ？

<Rect
  x={430}
  y={40}
  width={100}
  height={100}
  stroke="white"
  strokeWidth={5}
/>
<Text
  fontSize={20}
  text="?"
  stroke='white'
  strokeWidth={5}
  align="center"
  // similar coordinates than your Rect component
  x={480}
  y={90}
/>

檢查這個codesandbox示例