Блог

Главная - Вопросы по программированию - Добавление отступов с помощью React Konva

Добавление отступов с помощью React Konva

#konvajs #react-konva #konva #konvajs-reactjs

#конвайс #react-konva #конвайс #конвайс-reactjs

Вопрос:

Я хочу создать эквивалент этого (код sudo):

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

С элементами React Konva. Я знаю, как начать, используя Group , Rect , и Text , но я не могу понять, как сделать дополнение. Надеюсь, кто-нибудь сможет помочь! Спасибо!!

РЕДАКТИРОВАТЬ: это то, что я пытаюсь создать (зеленый фон с отступом 2px вокруг текста).

Ответ №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

Комментарии:

1. Привет, спасибо за ответ! Возможно, я неправильно понимаю, но я ищу, чтобы красный Rect цвет (в вашей демонстрации) соответствовал размеру Text , а отступы увеличивали его. Имеет ли это смысл? Я ДЕЙСТВИТЕЛЬНО ценю вашу помощь. Вы с Konva спасаете меня прямо сейчас, ха-ха!