React Konva center text in square

Question

I am trying to create a button with some text centred using a Rect and a Text component.

Here is a piece of code:

        <Stage>
            <Layer>
                <Rect
                    x={window.innerWidth - 50}
                    y={window.innerHeight - 50}
                    width={30}
                    height={30}
                    fill='#f2f1f0'
                    stroke='#777'
                    strokeWidth={1}
                >
                <Text
                  fontSize={20}
                  text="+"
                  stroke='#777'
                  strokeWidth={1}
                  align="center"
                />
               <Rect />
            </Layer>
        </Stage>

But I got this error :

Uncaught (in promise) TypeError: parentInstance.add is not a function

Is there a right way to put the Text component inside the Rect component?

Honey · Accepted Answer · 2021-01-21T09:56:01.080

4

Try this:

const App = () => {
  const textRef = React.useRef();
  const [size, setSize] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    setSize({
      width: textRef.current.width(),
      height: textRef.current.height()
    });
  }, []);
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group x={20} y={50}>
          <Rect
              x={window.innerWidth - 50}
              y={window.innerHeight - 50}
              width={size.width}
              height={size.height}
              fill='#f2f1f0'
              stroke='#777'
              strokeWidth={1}
          />
          <Text
            ref={textRef}
            fontSize={20}
            text="+"
            stroke='#777'
            strokeWidth={1}
            align="center"
          />
        </Group>
      </Layer>
    </Stage>
  );
};

edited Jan 21 '21 at 09:56

answered Jan 21 '21 at 09:50

Honey

2,208
11
21

add ref={testRef} as well – Honey Jan 21 '21 at 09:52
You will need to give the Text the same width and height as the button and text.align('center') and text.verticalAlign('middle'); – Vanquished Wombat Jan 21 '21 at 10:01
can you please help me out to sort this out https://stackoverflow.com/questions/76525337/ I need to get diamensions of frame and display them alongside of frame. – Deep Kakkar Jun 22 '23 at 07:01
I also used your code to display the F1, F2 etc in the frame but text is appearing outside of frame, – Deep Kakkar Jun 22 '23 at 07:02

React Konva center text in square

1 Answers1