Adding Padding with React Konva

Question

I want to create the equivalent of this (sudo code):

<div padding="4px">
    <p>My Text</p>
</div>

With React Konva elements. I know how to start, using Group, Rect, and Text, but I can't figure out how to do the padding. Hope someone can help! Thanks!!

EDIT: This is what I am trying to build (the green background with 2px padding around the text).

lavrton lavrton · Accepted Answer · 2020-12-28T02:22:26

You have padding property for text shape to use it.

In order to wrap a rectangle around a text shape, you have to calculate the size of the text.

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
            width={size.width}
            height={size.height}
            fill="red"
            shadowBlur={10}
          />
          <Text
            text="Some text on canvas"
            ref={textRef}
            fontSize={15}
            padding={10}
          />
        </Group>
      </Layer>
    </Stage>
  );
};

https://codesandbox.io/s/react-konva-text-with-padding-yh876

Adding Padding with React Konva

1 Answers