Манипулирование холстом HTML5 с помощью Konva: часть 1, начало работы

11 января 2018

Холст HTML5 уже давно поддерживается всеми популярными браузерами. Вы можете использовать его для рисования графики в браузере с помощью JavaScript. Графика, которая может быть создана на холсте, варьируется от простых линий и фигур до фотокомпозиций и анимаций.

В этой серии вы узнаете об очень полезной библиотеке холста под названием Konva. Вы можете использовать Konva для рисования различных фигур на холсте или на сцене. Помимо прочего, библиотека позволяет масштабировать, поворачивать и анимировать все эти фигуры и присоединять к ним слушателей событий.

В этом учебном пособии основное внимание будет уделено фундаментальным концепциям библиотеки, предоставляя краткий обзор различных функций библиотеки. После этого мы перейдем к более конкретным и сложным темам позже. Библиотека впервые появилась как вилка популярной библиотеки KineticJS.

Этап, слои и фигуры

Все, что вы рисуете с помощью Konva, потребует создания сцены с использованием Konva.Stage. Вы можете указать элемент контейнера этапа, используя атрибут контейнера. На каждом этапе также требуется значение ширины и высоты, которое может быть задано с использованием атрибутов ширины и высоты соответственно.

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

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

Рисование фигур с использованием Konva

Прежде чем мы создадим какие-либо фигуры, нам нужно включить библиотеку в ваш проект. Существует несколько способов сделать это. Если вы используете менеджеров пакетов, вы можете запускать следующие команды.

pm install konva
// OR
bower install konva

Вы также можете напрямую ссылаться на уменьшенную версию библиотеки, размещенной на cdnjs и jsDelivr.

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

var canvasWidth = 600;
var canvasHeight = 400;
var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});
var layerA = new Konva.Layer();
var rectA = new Konva.Rect({
  x: 75,
  y: 150,
  width: 200,
  height: 50,
  rotation: 45,
  fill: "blue",
  stroke: "black",
  strokeWidth: 4
});
var rectB = new Konva.Rect({
  x: 350,
  y: 50,
  width: 100,
  height: 250,
  cornerRadius: 50,
  fill: "red",
  stroke: "brown",
  strokeWidth: 10
});
layerA.add(rectA);
layerA.add(rectB);
stage.add(layerA);

Рисование чего-либо на холсте - это пятиступенчатый процесс. Во-первых, вам нужно создать экземпляр сцены, на которой будут рисоваться различные фигуры с помощью Konva.Stage. Для этого вам нужно указать ширину и высоту сцены, а также идентификатор элемента контейнера, который будет содержать сцену. В нашем случае прямоугольники рисуются внутри div, id которого является примером.

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

После создания слоев вы можете инициализировать различные формы, такие как прямоугольники, эллипсы, звезды и кольца, которые вы хотите показать на слоях. Наконец, вы должны добавить фигуры к слоям и слоям к сцене.

Создание групп в Konva

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

Чтобы добавить любую фигуру в группу, вам нужно использовать метод add (), как и при добавлении фигур в слой. Вы также можете добавить группу в другую группу для создания более сложных объектов. Например, вы можете создать человека внутри автомобиля как одну группу и добавить этого человека в группу, представляющую автомобиль.

В следующем примере я все упростил и создал только группу carA. После этого я могу вращать и масштабировать весь автомобиль сразу.

var canvasWidth = 600;
var canvasHeight = 400;
var stage = new Konva.Stage({
  container: "example",
  width: canvasWidth,
  height: canvasHeight
});
var layerA = new Konva.Layer();
var wheelA = new Konva.Ring({
  x: 130,
  y: 230,
  ierRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "First Wheel"
});
var wheelB = new Konva.Ring({
  x: 270,
  y: 230,
  ierRadius: 5,
  outerRadius: 30,
  fill: "gray",
  stroke: "black",
  name: "Second Wheel"
});
var frameA = new Konva.Rect({
  x: 80,
  y: 150,
  width: 240,
  height: 60,
  cornerRadius: 10,
  fill: "red",
  stroke: "black",
  name: "Bottom Frame"
});
var frameB = new Konva.Rect({
  x: 135,
  y: 90,
  width: 120,
  height: 60,
  cornerRadius: 10,
  fill: "orange",
  stroke: "black",
  name: "Top Frame"
});
var carA = new Konva.Group({
  x: 50,
  y: 0,
  rotation: 20,
  scaleX: 1.2
});
carA.add(wheelA, wheelB, frameA, frameB);
layerA.add(carA);
stage.add(layerA);

Слои в Конве

Вы уже знаете о слоях в Конве. Слоение - это нечто другое. По умолчанию все фигуры, добавляемые к слою, рисуются в том порядке, в котором они были добавлены. Это означает, что фигуры, добавленные в слой после всех остальных, будут нарисованы поверх других фигур.

Konva позволяет вам управлять порядком, в котором фигуры рисуются с использованием различных методов наложения, таких как moveToTop (), moveToBottom (), moveUp (), moveDown () и zIndex ().

Метод moveToTop () будет рисовать данную фигуру по всем другим формам, которые были добавлены к тому же слою. Формы, нарисованные на слое, добавленном на сцену Конвы после слоя нашей особой формы, будут по-прежнему оставаться выше нашей формы. Вот почему круг индиго в следующем примере остается ниже светло-зеленого круга даже после вызова moveToTop ().

Метод moveToBottom () будет рисовать данную фигуру ниже всех других фигур, которые были добавлены к тому же слою. Подобно moveToTop (), фигуры будут перемещаться на дно их собственных слоев, а не на слои ниже них.

Методы moveUp () и moveDown () перемещают форму, на которую они вызывают, одну позицию выше или ниже их текущей позиции на том же уровне. Метод zIndex () используется для установки индекса формы внутри его родительского слоя. В отличие от CSS, вы не можете установить произвольное значение zIndex в Konva. Для слоя с 10 формами значение zIndex может быть только между 0 и 9 (включительно).

В приведенном выше примере вы можете видеть, что просто нажатие кнопки «Индиго Топ» не рисует круг индиго выше всех остальных, а нажатие «Индиго над всеми другими» будет позиционировать его вверху. Это связано с тем, что последняя кнопка также перемещает слой, содержащий круг индиго, вверху.

Поскольку круги можно перетаскивать, может быть хорошей идеей перетащить их друг на друга и посмотреть, как меняется положение круга индиго, когда вы нажимаете разные кнопки.

Заключительные мысли

В этом уроке мы рассмотрели некоторые фундаментальные концепции, связанные с Konva. Теперь вы можете нарисовать некоторые общие фигуры на холсте и перемещать их как группу. В учебнике также показано, как продвигать определенную фигуру вверх или вниз в случае перекрытия.

JavaScript стал одним из фактических языков работы в Интернете. Это не лишено кривых обучения, и есть множество фреймворков и библиотек, которые тоже будут вам заняты. Если вы ищете дополнительные ресурсы для изучения или использования в своей работе, посмотрите, что у нас есть на Envato Market.

Если у вас есть какие-либо вопросы, связанные с этим уроком, не стесняйтесь, дайте мне знать в комментариях. В следующем уроке вы узнаете, как рисовать основные фигуры в Конве.