React-Konva 文本居中/从中心生长

Question

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?

Answer 1

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