使用 React Konva 添加填充

如何解决使用 React Konva 添加填充

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

import tensorflow.compat.v1 as tf

使用 React Konva 元素。我知道如何开始，使用 <div padding="4px"> <p>My Text</p> </div> 、Group 和 Rect，但我不知道如何进行填充。希望有人能帮忙！谢谢！！

编辑： 这就是我正在尝试构建的（绿色背景，文本周围有 2px 内边距）。

解决方法

您有 padding property 文本形状可以使用它。

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

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