Холст HTML5 уже давно поддерживается всеми популярными браузерами. Вы можете использовать его для рисования графики в браузере с помощью JavaScript. Графика, которую можно создать на холсте, варьируется от простых линий и форм до фото-композиций и анимации.
В этой серии вы узнаете об очень полезной библиотеке холстов под названием Konva . Вы можете использовать Konva для рисования различных фигур на холсте или сцене. Помимо прочего, библиотека позволяет масштабировать, вращать и анимировать все эти фигуры и прикреплять к ним слушатели событий.
В этом руководстве основное внимание будет уделено фундаментальным концепциям библиотеки, а также будет представлен краткий обзор различных функций библиотеки. После этого мы перейдем к более конкретным и сложным темам позже. Библиотека впервые возникла как форк популярной библиотеки KineticJS .
Сцена, слои и формы
Все, что вы рисуете с помощью Konva, потребует от вас создания сцены с использованием Konva.Stage . Вы можете указать элемент контейнера этапа, используя атрибут container . Каждый этап также требует значения ширины и высоты, которые могут быть указаны с использованием атрибутов width и height соответственно.
Один этап может содержать несколько слоев. Каждый из этих слоев будет иметь два рендера <canvas> . Средство визуализации сцены используется для рисования всех фигур, которые видны вам на сцене. Рендерер хитов скрыт от пользователей. Он используется для высокопроизводительного обнаружения событий.
Один слой может содержать несколько фигур, группы разных фигур или группу групп. Сцена, слои, группы и фигуры действуют как виртуальные узлы, которые можно индивидуально стилизовать и трансформировать.
Рисование фигур с помощью Konva
Прежде чем создавать какие-либо фигуры, нам нужно включить библиотеку в ваш проект. Есть несколько способов сделать это. Если вы используете менеджеры пакетов, вы можете запустить следующие команды.
|
1
2
3
|
npm install konva
// OR
bower install konva
|
Вы также можете напрямую ссылаться на минимизированную версию библиотеки, размещенной на cdnjs и jsDelivr .
После установки библиотеки вы можете использовать следующий код для создания прямоугольных фигур на холсте.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
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 на котором различные формы будут нарисованы с помощью Konva.Stage . Для этого необходимо указать ширину и высоту сцены, а также id для элемента контейнера, который будет содержать сцену. В нашем случае прямоугольники рисуются внутри div , id которого является example .
На следующем шаге вы должны создать все слои, которые вы хотите визуализировать на вашей сцене. В этом примере мы создаем только один слой, но вы можете создать несколько слоев и добавить их все на один этап. Различные слои могут быть очень полезны, когда ваш фон состоит как из статических, так и из движущихся элементов. В таких случаях вы можете добавить статические элементы на один слой и движущиеся элементы на другой. Поскольку вам не придется обновлять статический фон после каждой перерисовки, это может значительно повысить производительность.
После создания слоев вы можете инициализировать различные формы, такие как прямоугольники, эллипсы, звезды и кольца, которые вы хотите показать на слоях. Наконец, вы должны добавить фигуры к слоям и слои к сцене.
Создание групп в Конве
Группировать разные фигуры — хорошая идея, если вы хотите управлять всеми фигурами как единым целым. Например, предположим, что вы создали автомобиль, используя два круга для колес и два прямоугольных блока для кузова. Если вы хотите продвигать этот автомобиль без создания группы, вам придется индивидуально переводить все фигуры по одному. Более эффективный метод — просто добавить круги и прямоугольники в группу и перевести их все сразу.
Чтобы добавить любую фигуру в группу, вам нужно использовать метод add() , как вы делали это при добавлении фигур в слой. Вы также можете добавить группу в другую группу, чтобы создать более сложные объекты. Например, вы можете создать человека внутри автомобиля как одну группу и добавить этого человека в группу, которая представляет автомобиль.
В следующем примере я carA и создал carA группу carA . После этого я могу вращать и масштабировать всю машину сразу.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
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,
innerRadius: 5,
outerRadius: 30,
fill: «gray»,
stroke: «black»,
name: «First Wheel»
});
var wheelB = new Konva.Ring({
x: 270,
y: 230,
innerRadius: 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() нарисует данную фигуру поверх всех других фигур, которые были добавлены в тот же слой. Фигуры, нарисованные на слое, который был добавлен на сцену Konva после того, как слой с нашей определенной формой все еще будет оставаться над нашей формой Вот почему круг индиго в следующем примере остается ниже светло-зеленого круга даже после вызова moveToTop() .
Метод moveToBottom() нарисует заданную фигуру ниже всех других фигур, которые были добавлены в тот же слой. Так же, как и moveToTop() , фигуры будут перемещаться к нижней части своих собственных слоев, а не слоев под ними.
moveUp() и moveDown() перемещают фигуру, в которой они вызываются, на одну позицию выше или ниже их текущей позиции в том же слое. Метод zIndex() используется для установки индекса фигуры внутри ее родительского слоя. В отличие от CSS, вы не можете установить произвольное значение zIndex в Konva. Для слоя с 10 фигурами значение zIndex может быть только между 0 и 9 (включительно).
В приведенном выше примере вы можете видеть, что простое нажатие кнопки «Индиго сверху» не рисует круг индиго над всеми остальными, в то время как нажатие «Индиго над всеми остальными» позиционирует его сверху. Это потому, что последняя кнопка также перемещает слой, содержащий круг индиго, наверх.
Поскольку круги можно перетаскивать, хорошей идеей будет перетаскивать их друг на друга и видеть, как изменяется положение круга индиго при нажатии разных кнопок.
Последние мысли
В этом уроке мы рассмотрели некоторые основные понятия, связанные с Konva. Теперь вы сможете рисовать некоторые общие фигуры на холсте и перемещать их как группу. Учебное пособие также показало вам, как нажимать определенную форму вверх или вниз в случае наложения.
JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .
Если у вас есть какие-либо вопросы, связанные с этим учебником, не стесняйтесь сообщать мне в комментариях. В следующем уроке вы научитесь рисовать основные фигуры в Konva.