Как рисовать фигуры в React

Введение в React Konva

Если вы хотите рисовать фигуры на веб-странице, обычно решение довольно простое: просто используйте HTML Canvas. Это встроенная функция с большим количеством документации и руководств - в основном все, что вы могли бы попросить.

К сожалению, это плохо работает с React.

Чтобы программировать графику с помощью Canvas, вам необходимо иметь доступ к элементу Canvas и управлять им - одна из тех редких вещей, которые проще выполнить в обычном JavaScript, чем в React.

Это не значит, что невозможно использовать Canvas напрямую с React. Это вполне выполнимо. Но есть способ попроще - библиотека react-konva.

Konva - это библиотека JavaScript для рисования с помощью Canvas; react-konva расширяет эту функциональность до React. Но в то время как у Konva есть тонны документации, документация react-konva немного более проста.

Итак, вот как начать работу с react-konva и нарисовать несколько основных фигур.

Если вы дочитали до этого места, я предполагаю, что вы знаете, как использовать приложение create-response-app для запуска и запуска вашего проекта React (если нет, то есть множество руководств).

Затем установите библиотеки react-konva и konva, запустив npm install react-konva konva --save в своем терминале.

В файле, в котором вы хотите создать свой рисунок, добавьте import { Stage, Layer, Line } from ‘react-konva’; вверху.

Независимо от того, что вы рисуете, вам почти всегда нужно импортировать Stage и Layer.

Этап - это как бы то, на что это похоже: это компонент, в котором вы настраиваете все, чтобы сделать свой рисунок.

Компоненты слоя находятся внутри сцены, и вы можете добавлять их сколько угодно. Каждый компонент слоя содержит компоненты формы.

Слои важны для таких вещей, как перемещение объектов и формы на переднем плане. Однако в этом базовом руководстве мы будем использовать только один слой на нашей сцене.

Мы импортируем Line здесь, потому что мы будем использовать ее для создания некоторых треугольников, но вы должны импортировать все, что лучше всего подходит для ваших целей (варианты включают Circle, Rect, Text, RegularPolygon и многие другие).

Наша цель - нарисовать прямоугольный треугольник. Если бы вместо этого нам нужен был равносторонний треугольник, мы могли бы использовать RegularPolygon, который представляет собой простой способ рисовать фигуры ... при условии, что эти фигуры имеют равные стороны и углы. Прямоугольный треугольник - нет, поэтому мы будем использовать для этого компонент Line.

Начнем с определения функционального компонента, который создаст наш треугольник:

export const rightTriangle = () => {
  return(
    null
  );
};

Конечно, сейчас это ничего не возвращает. Итак, давайте заменим этот null сценой, которая будет удерживать наш слой и, в конечном итоге, нашу форму.

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
    </Stage>
  );
};

Свойства width и height устанавливают размер сцены - в данном случае 100 пикселей каждый. Вы можете настроить это как хотите.

Затем давайте создадим слой внутри сцены:

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
      <Layer>
      </Layer>
    </Stage>
  );
};

Теперь о самой форме. Компонент Line невероятно эффективен для создания всевозможных многоугольных форм - все, что вам нужно сделать, это указать ему координаты каждой точки внутри формы. Однако имейте в виду, что начало координат находится в верхнем левом углу, а положительные координаты y перемещаются оттуда вниз. Поэтому, если мы хотим, чтобы первый угол нашего треугольника находился в нижнем левом углу, нам нужно задать Line координаты [0, 100].

Следующая координата в правом нижнем углу будет [100, 100]. Наконец, третья координата, составляющая наш треугольник, вверху слева, будет [0, 0]. Нам также необходимо передать свойство closed, чтобы react-konva знал, что мы пытаемся нарисовать замкнутую форму, а не просто кривую линию. Мы также хотим задать ему цвет заливки, чтобы мы могли действительно видеть форму.

export const rightTriangle = () => {
  return(
    <Stage width={100} height={100}>
      <Layer>
        <Line closed points={[0, 100, 100, 100, 0, 0]} fill="red" />
      </Layer>
    </Stage>
  );
};

Оттуда мы можем добавлять всевозможные другие реквизиты. Например, stroke="black" strokeWidth={1} даст ему черную рамку шириной в один пиксель.

Для более подробного обзора доступных опций вы можете ознакомиться с документацией для обычной версии Konva на JavaScript - просто имейте в виду, что все, что указано как свойство объекта для обычного JavaScript, должно вместо этого передаваться как опора в React.

Теперь вперед и создайте красивую графику в React!