[英]How to add text inside rectangle in React Konva?
I am using React Konva to draw shapes.我正在使用 React Konva 绘制形状。 I want to insert a question mark inside the last rectangle.
我想在最后一个矩形内插入一个问号。 The code I'm using is as below.
我正在使用的代码如下。 But it doesn't quite work:
但它并不完全有效:
<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>
I've added the Group tag with Text to make it work but it doesn't work.我已经添加了带有文本的组标签以使其工作,但它不起作用。
Have you tried not wrapping Text
with Rect
and adding x
& y
props to Text
?您是否尝试过不使用
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}
/>
Check this codesandbox example检查这个codesandbox示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.