konvajs - 使用 React Konva 添加填充

Question

我想创建与此等效的（sudo 代码）：

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

使用 React Konva 元素。我知道如何开始，使用Group,Rect和Text，但我不知道如何做 padding。希望有人能帮忙！谢谢！！

编辑：这就是我要构建的（绿色背景，文本周围有 2px 填充）。

Answer 1

您有文本形状的填充属性来使用它。

为了在文本形状周围包裹一个矩形，您必须计算文本的大小。

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