Вводное руководство серии научило вас рисовать первую фигуру с помощью Konva. Также объясняется, как слои и группы работают в Конве. В оставшейся части серии мы сосредоточимся на более конкретных темах, таких как создание основных и сложных фигур или присоединение слушателей событий к различным фигурам, чтобы сделать вашу графику интерактивной.
Этот конкретный урок покажет вам, как создавать базовые фигуры, такие как прямоугольники, круги и эллипсы в Konva. Вы также узнаете о различных атрибутах, которые можно использовать для настройки внешнего вида всех этих фигур в зависимости от ваших потребностей. В следующих разделах руководства будет обсуждаться, как рисовать линии разного типа и правильные многоугольники с помощью Konva.
Рисование прямоугольников, кругов и эллипсов
Вы можете создавать прямоугольники в Konva, используя объект Konva.rect() . Положение верхнего левого угла прямоугольника можно указать с помощью свойств x и y . Точно так же вы можете указать ширину и высоту прямоугольника, используя свойства width и height . Все нарисованные прямоугольники будут иметь острые углы по умолчанию. Однако вы можете округлить их, выбрав соответствующее значение для свойства cornerRadius .
Можно показать или скрыть прямоугольник, используя свойство visible . Если вы не хотите полностью скрывать прямоугольник, но при этом сделать его полупрозрачным, вы можете использовать свойство opacity . Вы можете установить его на любое число от 0 до 1 включительно. Форма не будет видна, если непрозрачность установлена на 0.
Вы также можете вращать или масштабировать прямоугольники, используя свойства rotation и scale соответственно. Вращение указывается в виде простого числа, но применяется в градусах. У вас есть возможность масштабировать любой прямоугольник на оси x или y независимо, используя свойства scaleX и scaleY .
Вот пример, который рисует разные прямоугольники на холсте, используя все свойства, которые мы только что обсуждали.
|
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
|
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: 10,
y: 10,
width: 200,
height: 50,
fill: «yellow»,
stroke: «black»
});
var rectB = new Konva.Rect({
x: 160,
y: 30,
width: 80,
height: 250,
fill: «orange»,
stroke: «black»
});
var rectC = new Konva.Rect({
x: 200,
y: 160,
width: 180,
height: 180,
cornerRadius: 10,
strokeWidth: 10,
opacity: 0.8,
fill: «red»,
stroke: «black»
});
var rectD = new Konva.Rect({
x: 400,
y: 20,
width: 180,
height: 180,
scaleX: 1.8,
scaleY: 0.75,
rotation: 45,
fill: «lightgreen»,
stroke: «black»
});
layerA.add(rectA, rectB, rectC, rectD);
stage.add(layerA);
|
Следует отметить, что прямоугольники нарисованы не в том порядке, в котором они были созданы. Вместо этого они отображаются в том порядке, в котором они были добавлены в слой. Свойства fill и stroke используются для задания цвета заливки и обводки соответственно.
Вы можете создавать круги в Konva, используя объект Konva.circle() . На этот раз свойства x и y определяют центральную точку для рисования круга. Вы все еще можете указать значение как для свойств ширины, так и для высоты Эти значения используются для расчета диаметра круга, который будет нарисован. Однако круг имеет одинаковую ширину и высоту. Это означает, что значение, указанное позже, имеет приоритет над значением, указанным ранее в случае конфликта. Другими словами, если вы установите width круга равной 100, а затем установите ее height равной 180, диаметр круга будет равен 180, а ширина будет игнорироваться.
Чтобы избежать путаницы, вы можете опустить свойства width и height и указать значение для radius круга. Имейте в виду, что вы должны установить радиус 50, чтобы нарисовать круг, ширина и высота которого 100.
Аналогичным образом вы также можете создать эллипс, используя объект Konva.ellipse() . Единственное отличие состоит в том, что свойство radius теперь будет принимать объект со свойствами x и y в качестве значения. Если указано, свойство width и height теперь будет применяться независимо для определения окончательной формы эллипса.
|
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
66
67
68
69
70
71
72
|
var canvasWidth = 600;
var canvasHeight = 400;
var stage = new Konva.Stage({
container: «example»,
width: canvasWidth,
height: canvasHeight
});
var layerA = new Konva.Layer();
var circA = new Konva.Circle({
x: 100,
y: 100,
width: 180,
fill: «yellow»,
stroke: «black»
});
var circB = new Konva.Circle({
x: 180,
y: 150,
height: 100,
fill: «orange»,
stroke: «black»
});
var circC = new Konva.Circle({
x: 200,
y: 275,
radius: 100,
opacity: 0.5,
fill: «red»,
stroke: «black»
});
var ellipA = new Konva.Ellipse({
x: 400,
y: 75,
width: 70,
height: 100,
rotation: -15,
fill: «lightgreen»,
stroke: «black»
});
var ellipB = new Konva.Ellipse({
x: 400,
y: 75,
width: 80,
height: 120,
rotation: -15,
strokeWidth: 5,
fill: «white»,
stroke: «black»
});
var ellipC = new Konva.Ellipse({
x: 450,
y: 275,
radius: {
x: 100,
y: 50
},
scaleY: 2,
fill: «violet»,
stroke: «black»
});
layerA.add(circA, circB, circC, ellipB, ellipA, ellipC);
stage.add(layerA);
|
Следует отметить, что ellipB имеет большую высоту и ширину по сравнению с ellipA . Поскольку они оба имеют одинаковые значения x и y , мне пришлось ellipB добавить ellipB к слою, чтобы ellipA видимым. Если ellipB был добавлен после ellipA , он был бы нарисован поверх ellipA , скрывая его от зрителей.
Если вы внимательно наблюдаете, вы также увидите, что фиолетовый круг на самом деле является эллипсом с радиусом y установленным на 50, и радиусом x установленным на 100. Однако он был масштабирован в 2 раза в направлении y. Масштабирование также увеличивает ширину хода, делая его в два раза шире в верхней и нижней части эллипса по сравнению с его левым и правым краями.
Рисование линий с помощью Konva
Вы можете использовать объект Konva.Line() для создания различных видов линий и кривых. Все линии требуют указания точек, через которые должна проходить линия, используя свойство points . Точки указываются в виде массива.
Вы можете объединить любой набор точек, используя массив points чтобы сформировать многоугольник, установив значение closed атрибута в значение true . Точно так же вы можете преобразовать набор прямых линий в сплайны, установив значение для атрибута tension . Нулевое значение приведет к прямым линиям. Более высокие значения создают кривые линии.
Вы можете создать замкнутую и изогнутую форму (BLOB-объект), установив значение для свойства tension а также закрыв кривую, установив для параметра closed значение true .
Как и остальные формы, которые мы обсуждали, вы можете установить ширину обводки для рисования линий с strokeWidth атрибута strokeWidth . Вы также можете указать цвет fill для закрытых фигур.
В следующем примере я использовал один и тот же набор точек для построения всех форм. Однако я также использовал метод move() для смещения каждой фигуры на определенное расстояние, чтобы избежать наложений.
|
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
66
|
var canvasWidth = 600;
var canvasHeight = 400;
var stage = new Konva.Stage({
container: «example»,
width: canvasWidth,
height: canvasHeight
});
var layerA = new Konva.Layer();
var lineA = new Konva.Line({
points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
stroke: «black»
});
var lineB = new Konva.Line({
points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
closed: true,
fill: «yellow»,
stroke: «black»
});
var lineC = new Konva.Line({
points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
tension: 0.8,
stroke: «blue»
});
var lineD = new Konva.Line({
points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
tension: 1.8,
stroke: «red»
});
var lineE = new Konva.Line({
points: [50, 20, 20, 100, 80, 140, 60, 80, 200, 20],
closed: true,
tension: 2.2,
fill: «lightblue»,
stroke: «black»
});
lineB.move({
x: 180,
y: 40
});
lineC.move({
x: 380,
y: 0
});
lineD.move({
x: 0,
y: 200
});
lineE.move({
x: 180,
y: 220
});
layerA.add(lineA, lineB, lineC, lineD, lineE);
stage.add(layerA);
|
Следует также отметить, что красные и синие линии построены с использованием одного и того же набора точек, но другое значение tension значительно меняет окончательную форму кривой.
Рисование правильных многоугольников
Вы можете тщательно выбирать значения различных точек в массиве points чтобы рисовать правильные многоугольники, такие как пятиугольники и шестиугольники. Рисование более сложных правильных многоугольников, таких как восьмиугольники, с помощью этого метода может быть громоздким и подверженным ошибкам. Чтобы избежать ошибок, вы должны использовать объект Konva.RegularPolygon() для создания правильных полигонов.
Свойства x и y используются для указания центра многоугольника. Свойство radius используется для указания расстояния между центральной точкой многоугольника и всеми его вершинами. Вы можете использовать свойство sides чтобы указать количество сторон, которые должен иметь многоугольник. Помните, что все стороны многоугольника, созданные с помощью этого метода, будут иметь одинаковую длину. Вы можете изменить длину некоторых сторон, используя свойства scaleX и scaleY , но это также изменит ширину хода масштабированной стороны.
Как и все другие фигуры, которые мы обсуждали, вы можете изменить ширину обводки, непрозрачность и видимость обычных многоугольников, используя strokeWidth , opacity и visibility .
|
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
|
var canvasWidth = 600;
var canvasHeight = 400;
var stage = new Konva.Stage({
container: «example»,
width: canvasWidth,
height: canvasHeight
});
var layerA = new Konva.Layer();
var triangle = new Konva.RegularPolygon({
x: 150,
y: 275,
sides: 3,
radius: 100,
scaleY: 1.6,
stroke: «black»,
fill: «rgba(200,0,200, 1)»,
});
var square = new Konva.RegularPolygon({
x: 60,
y: 60,
sides: 4,
radius: 50,
fill: «rgba(200,0,0, 0.5)»,
stroke: «black»
});
var pentagon = new Konva.RegularPolygon({
x: 160,
y: 160,
sides: 5,
radius: 80,
fill: «rgba(0,200,0, 0.5)»,
stroke: «black»
});
var hexagon = new Konva.RegularPolygon({
x: 350,
y: 120,
sides: 6,
radius: 80,
fill: «rgba(0,0,200, 0.5)»,
stroke: «black»
});
var octagon = new Konva.RegularPolygon({
x: 450,
y: 275,
sides: 8,
radius: 100,
fill: «rgba(200,200,0, 0.5)»,
stroke: «black»
});
layerA.add(triangle, square, pentagon, hexagon, octagon);
stage.add(layerA);
|
Последние мысли
В этом уроке мы рассмотрели самые основные формы, которые Konva позволяет нам с легкостью рисовать на холсте. Мы также узнали о различных атрибутах, которые можно использовать для контроля внешнего вида всех этих фигур. Большинство атрибутов являются общими для всех фигур, но некоторые из них применимы только к определенным фигурам.
Если у вас есть какие-либо вопросы, пожалуйста, дайте мне знать в комментариях. Мы узнаем о некоторых более сложных фигурах в следующем уроке серии .