I am trying to draw a triangle on screen, and pin labels to each vertex of the triangle. To accomplish this, I have opted to use React-Konva. I create the triangle by drawing lines towards points which I have listed manually (As a percentage of window.inner..), and I am planning on adding the labels by subtracting or adding a certain margin to these calculated vertex locations.
<Stage width={maxwidth} height={maxheight} style={{marginLeft:'50px'}}>
<Layer>
<Text
text={survData[index + 1].question.options[0]}
x={shapewidth/2}
y={margin/2}
fontSize={20}
align="center"
/>
<Shape
sceneFunc={(context, shape) => {
context.beginPath();
context.moveTo(shapewidth / 2, margin);
context.lineTo(margin, (shapeheight - margin));
context.lineTo(shapewidth - margin, (shapeheight - margin));
context.closePath();
context.fillStrokeShape(shape);
}}
fill="#00D2FF"
stroke="black"
strokeWidth={4}
/>
</Layer>
</Stage>
The length of the labels that sit on the vertices of the triangle are variable, so it would be nice if they remain centered. The docs suggest that I can center the text using a HTML-like 'align' property. As you can see, I have attempted to implement this, but regardless, I get the following. The text is not correctly centered around the vertex. Can anyone point out the mistake I'm making, or if there is a better way?
align: center
works relative to defined width
of a text shape. You can put your text at the start of the shape ( x = 0
), set text width equal to shape width.
<Text
text="Sample text"
x={0}
y={margin / 2}
width={shapewidth}
fontSize={20}
align="center"
/>
Demo: https://codesandbox.io/s/stoic-mcnulty-ohxs11?file=/src/index.js
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.