使用 React Konva 添加填充

Question

我想创建这个（sudo 代码）的等价物：

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

使用 React Konva 元素。我知道如何开始，使用 Group、Rect 和 Text、，但我不知道如何进行填充 。希望有人能帮忙！谢谢！！

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

Answer 1

您有 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

使用 React Konva 添加填充

Adding Padding with React Konva

konvajs

react-konva

konva

konvajs-reactjs