Вы можете слышать или не слышать о Paper.js . Итак, начнем с вопроса: что такое Paper.js? Это библиотека, которая позволяет создавать и работать с векторной графикой. Официальный сайт описывает его как Швейцарский армейский нож сценариев векторной графики.
Несмотря на то, что библиотеке есть что предложить, ее легко освоить, даже если вы никогда не слышали об этом раньше. В этом уроке я начну с самых основ библиотеки, а затем перейду к сложным темам.
Использование PaperScript
Есть два способа использования библиотеки. Вы можете использовать PaperScript, который является расширением JavaScript, и поможет вам сделать что-то быстрее, или вы можете просто использовать старый добрый JavaScript.
PaperScript — это тот же самый старый JavaScript, который вы всегда использовали. Однако добавлена поддержка математических операторов для point и size объектов. Это также упрощает установку обработчиков событий для объектов Project , View и Mouse Tool .
При загрузке PaperScript вы должны использовать обычный тег script с типом, установленным в «text / papercript». Если вы загружаете код извне, вам также необходимо добавить <script> с соответствующим URL для загрузки кода. Последний атрибут, который вам нужно указать, — это data-paper-canvas="canvasId" или сокращенная версия canvas="canvasId" , который сообщает библиотеке о канве, с которым нужно работать. Код ниже создает четырехугольник в PaperScript.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
<script type=»text/paperscript» canvas=»quad»>
var path = new Path();
path.strokeColor = ‘black’;
var pointOne = new Point(100, 20);
var pointTwo = new Point(-100, 100);
var pointThree = new Point(300, 30);
path.moveTo(pointOne);
path.lineTo(pointOne + pointTwo);
path.lineTo(pointTwo + pointThree);
path.lineTo(pointOne + pointThree);
path.closed = true;
</script>
|
Использование JavaScript
Если вам не нравится PaperScript, вы также можете использовать JavaScript в своих проектах. Вам придется добавить еще несколько строк кода, если вы решите сделать это таким образом. Первое, что вам нужно сделать, это проверить, готов ли DOM, потому что вы не сможете работать с холстом до этого. После этого вы можете настроить проект и вид, используя paper объект. Все классы и объекты Paper.js теперь будут доступны только через объект paper .
Как я уже указывал ранее, вам придется использовать математические функции вместо операторов при работе с Point и Size. Код ниже иллюстрирует все эти различия:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
window.onload = function() {
var canvas = document.getElementById(‘quad’);
paper.setup(canvas);
var path = new paper.Path();
path.strokeColor = ‘black’;
var pointOne = new paper.Point(100, 20);
var pointTwo = new paper.Point(-100, 100);
var pointThree = new paper.Point(300, 30);
path.moveTo(pointOne);
path.lineTo(pointOne.add(pointTwo));
path.lineTo(pointTwo.add(pointThree));
path.lineTo(pointOne.add(pointThree));
path.closed = true;
paper.view.draw();
}
|
Как видно из приведенных выше фрагментов кода, при работе с Paper.js использовать PaperScript относительно просто. Поэтому все примеры теперь будут основаны на PaperScript.
Иерархия проектов
Если вы когда-либо использовали приложение для графического дизайна, такое как Adobe Photoshop или Illustrator, вы должны быть знакомы с концепцией слоев. Каждый слой в этих программах имеет свой собственный контент, который в сочетании с другими слоями создает конечный результат. Подобные слои также существуют в Paper.js и могут быть доступны с помощью project.layers .
Первоначально каждый проект имеет один слой, который доступен через project.activeLayer . Любые новые элементы, которые вы создаете, добавляются в текущий активный слой как его дочерний элемент. Все дочерние layer.children в определенном слое могут быть доступны с layer.children свойства layer.children активного слоя.
Есть несколько способов получить доступ ко всем этим детям. Если вам нужен только доступ к первому и последнему дочернему элементу любого элемента, вы можете использовать item.firstChild и item.lastChild соответственно. Вы также можете назначить определенное имя любому дочернему элементу, а затем использовать это имя для доступа к нему позже. Допустим, слой, над которым вы работаете, имеет около 30 детей. Это не практично, чтобы просмотреть все из них один за другим. По этой причине в библиотеке есть свойство layer.children.length которое вы можете использовать для получения общего числа дочерних элементов, а затем выполнять итерацию по списку с помощью цикла for .
Этот фрагмент кода обращается к различным дочерним элементам, используя все свойства, которые мы только что обсудили:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
var circleA = new Path.Circle(new Point(45, 150), 45);
var circleB = new Path.Circle(new Point(110, 150), 20);
var circleC = new Path.Circle(new Point(165, 150), 35);
var circleD = new Path.Circle(new Point(255, 150), 55);
var circleE = new Path.Circle(new Point(375, 150), 65);
var circleF = new Path.Circle(new Point(475, 150), 35);
circleC.name = ‘GreenCircle’;
project.activeLayer.firstChild.fillColor = ‘orange’;
project.activeLayer.lastChild.fillColor = ‘pink’;
project.activeLayer.children[1].fillColor = ‘purple’;
project.activeLayer.children[‘GreenCircle’].fillColor = ‘lightgreen’;
for (var i = 3; i < 5; i++) {
project.activeLayer.children[i].fillColor = ‘tomato’;
}
|
Приведенная ниже демонстрация показывает скрипт в действии. Вы можете убедиться, что цвет всех кружков соответствует цвету, который мы им присвоили в коде выше.
Вы также можете использовать метод item.parent для доступа к родительскому элементу, как метод item.children , который вы использовали для доступа ко всем его item.children элементам. Всякий раз, когда вы создаете новый элемент, его родитель всегда будет текущим активным слоем проекта. Однако его можно изменить, добавив элемент в качестве дочернего элемента другого layer или group .
Прежде чем идти дальше, позвольте мне объяснить, что такое group самом деле. Если честно, и layer и group очень похожи. Одно из основных различий между этими двумя заключается в том, что любые новые элементы, которые вы создаете, автоматически добавляются в активный слой, но в случае группы вам придется добавлять элементы самостоятельно.
Существует несколько способов добавления элементов в группу. Вы можете передать элемент массивов в конструктор группы, и все они будут добавлены в массив item.children группы. Чтобы добавить элементы в группу после ее создания, вы можете использовать item.addChild(item) . Вы также можете вставить дочерний элемент в определенный индекс, используя item.insertChild(index, item) .
Удаление элементов также просто, как их добавление. Чтобы удалить любой элемент из проекта, вы можете использовать item.remove() . Имейте в виду, что это не уничтожит элемент, и его можно добавить в проект в любое время. Если у удаленного предмета есть дети, все дети также будут удалены. Что делать, если вы хотите удалить всех детей, но не трогать их? Это может быть достигнуто с помощью функции item.removeChildren() .
Понимание предметов
Термин item появился в учебнике уже несколько раз. Итак, что это? Все, что появляется в проекте Paper.js, является item . Это включает в себя layers , paths , groups и т. Д. В то время как различные элементы имеют свойства, специфичные для них, другие свойства применимы ко всем из них.
Если вы намереваетесь скрыть элемент от пользователя, вы можете сделать это, установив значение item.visible в false . Вы также можете клонировать любой элемент, используя item.clone() . Эта функция возвращает клонированный элемент, который можно сохранить в переменной и использовать позже. Вы также можете изменить непрозрачность любого элемента, используя свойство item.opacity . Любое значение от 0 до 1 сделает элемент прозрачным.
Вы также можете установить режим item.blendMode для любого элемента, используя свойство item.blendMode . Режим наложения должен быть передан в виде string . Библиотека также предоставляет свойство item.selected которое, если установлено в true , создает визуальный контур поверх этого элемента. Это может быть очень полезно во время отладки, поскольку позволяет увидеть построение путей, отдельных точек сегмента и ограничивающих рамок элементов.
Предмет Трансформации
Элементы можно легко масштабировать, поворачивать или перемещать в проекте Paper.js. В этом разделе я кратко расскажу обо всех этих преобразованиях.
Чтобы изменить положение item , вы можете использовать его свойство item.position и установить позицию на новую точку. Если вы хотите переместить элемент, вы можете сделать это с помощью оператора += .
Вы также можете масштабировать любой элемент, используя item.scale(scale) . Это изменит предмет вокруг его центральной точки. Вы можете масштабировать элемент вокруг какой-либо другой точки, указав его в качестве второго параметра, например item.scale(scale, point) . Кроме того, библиотека также позволяет по-разному масштабировать элементы в вертикальном и горизонтальном направлениях, передавая два числа в качестве параметров, например item.scale(scaleX, scaleY) .
Вращение предметов похоже на их масштабирование. Вы можете использовать item.rotate(angle) чтобы вращать элементы вокруг их центра. Угол указывается в градусах, а вращение происходит по часовой стрелке. Чтобы повернуть элемент вокруг определенной точки, вы также можете передать точку в качестве второго параметра, например item.rotate(angle, point) .
Следующий фрагмент кода применяет все преобразования и манипуляции, которые мы только что обсудили, в трех разных прямоугольниках.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var rectA = new Path.Rectangle(new Point(250, 70), new Size(120, 120));
rectA.fillColor = ‘pink’;
var rectB = rectA.clone();
rectB.fillColor = ‘purple’;
rectB.position += new Point(80, 80);
rectB.opacity = 0.6;
rectB.blendMode = ‘color-burn’;
rectB.scale(1.5);
rectB.rotate(45);
var rectC = rectB.clone();
rectC.fillColor = ‘lightgreen’;
rectC.position += new Point(-180, 0);
rectC.blendMode = ‘color-dodge’;
rectC.scale(1.5);
|
Код довольно понятен. Я клонирую прямоугольник B из прямоугольника A, и прямоугольник B приобретает все свойства прямоугольника A. То же самое касается прямоугольников B и C.
Обратите внимание, что я использовал оператор += который я обсуждал выше, для перемещения элементов. Этот оператор перемещает элементы относительно их старых позиций вместо использования абсолютных значений.
Демонстрация ниже показывает вам окончательный результат после всех этих преобразований. Вы можете попробовать разные режимы наложения или изменить другие свойства в демоверсии, чтобы увидеть, как они влияют на конечный результат.
Последние мысли
Как я упоминал ранее, Paper.js прост в освоении и позволяет с легкостью создавать векторную графику. Этот урок охватил самые основы, которые вам необходимо знать для работы с библиотекой. Вскоре мы опубликуем следующий урок серии, в котором будут подробно обсуждаться пути и геометрия.
В то же время важно отметить, что JavaScript стал одним из де-факто языков работы в сети. Это не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на рынке Envato .
До тех пор я предлагаю вам создать несколько собственных демонстраций и практиковаться в том, что вы уже узнали. Если у вас есть какие-либо вопросы относительно этого урока, дайте мне знать в комментариях.