В этой статье вы прочитаете про JavaScript библиотеку Paper.js для работы с Canvas, если вас интересует эта тема то вам точно стоит почитать эту статью.
Также если вас интересуют различные библиотеки JavaScript, то почитайте статью «Jest тестирование в JavaScript», вполне вероятно вам тоже будет интересно.
Установка Paper.js:
Скачать её себе вы можете через NPM или скачать Zip файл и перекинуть его себе в проект.
Если хотите через NPM, то введите эту команду:
1 | npm install paper |
Если же хотите скачать Zip файл и перенести скрипт в проект, то перейдите по ссылке и скачайте его, заходите в папку dist, и берёте файл «paper-full.min.js», перемешаете в свой проект.
Работа с Paper.js:
Paper.js предлагает разные подходы к интеграции в браузере. Самый простой способ — использовать PaperScript, наше расширение JavaScript, которое упрощает некоторые задачи. Для более продвинутых пользователей или более крупных проектов может быть предпочтительнее работать напрямую с JavaScript, но об этом потом.
PaperScript:
PaperScript — это простой старый JavaScript, к которому вы привыкли, с добавленной поддержкой математических операторов (+ — * /%) для объектов Point и Size. Код PaperScript автоматически выполняется в своей собственной области видимости, которая, не загрязняя глобальную область видимости, по-прежнему имеет доступ ко всем глобальным объектам и функциям браузера, таким как документ или окно.
По умолчанию библиотека Paper.js экспортирует в глобальную область только один объект: бумажный объект. Он содержит все классы и объекты, которые определяет библиотека. Однако при работе с PaperScript пользователю не нужно об этом заботиться, потому что в PaperScript, благодаря использованию умной области видимости, все объекты и функции paper кажутся глобальными.
PaperScript также предлагает автоматическое создание объектов «Project», «View» и «Mouse Tool» и упрощает установку для них обработчиков событий.
Код PaperScript загружается так же, как и любой другой JavaScript с использованием тега <script>, за исключением того, что для типа установлено значение text/papercript или text/x-papercript. Код может быть внешним файлом src="URL" или встроенным:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/paperscript" canvas="myCanvas"> // Создайте объект Paper.js, чтобы провести в нем линию: var path = new Path(); // Придайте линии цвет path.strokeColor = 'black'; var start = new Point(100, 100); // Переместитесь в начало и проведите линию оттуда path.moveTo(start); // Обратите внимание на оператор плюса на объектах Point. // PaperScript делает это за нас и многое другое! path.lineTo(start + [ 100, -50 ]); </script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> |
Если мы скопируем код в файл с именем js/myScript.js, мы сможем стереть приведенный выше пример, чтобы вместо этого загрузить внешний файл.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/paperscript" src="js/myScript.js" canvas="myCanvas"> </script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> </html> |
Эти атрибуты поддерживаются в тегах PaperScript <script>:
- src — Путь до файла с Paper.js;
- canvas — Связывает код PaperScript с холстом с заданным идентификатором и на лету создает для него объект «Project» и «View»
Paper.js можно настроить добавив атрибуты к тегу canvas:
- resize — Если стоит в
true, то позволяет блок настроить так, чтобы динамически менять размер; - hidpi — По у молчанию Paper.js рендарит всё высоком разрешение, для экранов с высоким DPI (retina), если вам это не нужно, поставьте
hidpi="off"; - keepalive -Если значение true, то анимация будет продолжаться даже если вкладка не открыта, по умолчанию
falseдля экономии батарее.
Использование JavaScript:
Чтобы понять, как работать с Paper.js напрямую из JavaScript, без использования автоматизмов PaperScript, нам сначала нужно немного рассказать об архитектуре Paper.js. При работе с PaperScript каждый сценарий запускается в своей области, объекте PaperScope. Глобальный бумажный объект, через который открывается библиотека, также является таким объектом PaperScope. Эти области действия можно рассматривать как контекст выполнения.
Области были введены как способ иметь отдельные контексты PaperScript на странице с множеством примеров, каждый из которых имеет собственное представление и проект, не видя друг друга, но все же разделяя код библиотеки. Их можно было рассматривать как изолированные «плагины» с общим кодом.
Каждая область или контекст содержит ряд объектов, описывающих его состояние, например список открытых проектов, ссылку на активный проект, список представлений, каждое из которых представляет элемент холста, текущее активное представление, список инструментов мыши. , текущий активный инструмент и т.д.
Чтобы объяснить связь между областями действия, проектами, представлениями и инструментами: каждая область может содержать один или несколько проектов, которые отображаются в одном или нескольких представлениях (каждое из которых представляет собой холст Paper.js). Представления не связаны с конкретным проектом, но фактически отображают все видимые проекты, элементы которых находятся в видимой области. Инструменты могут работать с любым проектом в любом представлении, если они относятся к одной и той же области.
При работе с JavaScript напрямую в большинстве случаев все, что требуется, — это одна область. В рамках этой области можно по-прежнему работать с несколькими проектами или представлениями, создавая их с помощью конструкторов классов new Project() и new View(canvas).
Самый простой способ — использовать существующий paper объект и использовать его метод paperScope.setup(canvas) для инициализации пустого проекта и представления. Мы повторно используем пример из Работа с Paper.js, чтобы увидеть, что дополнительно требуется при работе напрямую с JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('myCanvas'); paper.setup(canvas); var path = new paper.Path(); path.strokeColor = 'black'; var start = new paper.Point(100, 100); path.moveTo(start); path.lineTo(start.add([ 200, -50 ])); paper.view.draw(); } </script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> </html> |
Поэтому, если мы сравним этот пример с примером, написанным на PaperScript, мы увидим ряд различий. Помимо кода из предыдущего примера нам необходимо:
- Зарегистрируйте обработчик, когда DOM будет готов, поскольку до этого мы не можем работать с холстом.
- Скажите paper объекту, чтобы он настроил проект и вид для нашего холста. Вместо передачи объекта холста мы также можем передать идентификатор элемента холста в виде строки. В PaperScript это происходит автоматически с помощью атрибута
canvas = "ID". - Доступ ко всем классам и объектам Paper.js через объект paper, поскольку они больше не являются глобальными.
- Используйте математические функции вместо операторов в пунктах «Point и Size».
- Нарисуйте представление в конце, поскольку теперь оно автоматически обрабатывается только при установке обработчика
view.onFrame.
Доступ ко всем классам и объектам через paper объект может показаться не таким практичным, поэтому вот две стратегии обхода этого.
Самый простой подход — скопировать все поля из paper объекта в глобальную область видимости. Это можно сделать вручную, что будет хорошо, если есть только один проект, представление и инструмент. Но при их множестве глобальные ссылки на активные (проект, представление и инструменты) не будут обновляться. К счастью, для этого есть метод, который внутренне выполняет некоторые условия JavaScript, поэтому эти ссылки синхронизируются: paper.install(window). Имея это, мы можем переписать код из приведенного выше примера:
1 2 3 4 5 6 7 8 9 10 | paper.install(window); window.onload = function() { paper.setup('myCanvas'); var path = new Path(); path.strokeColor = 'black'; var start = new Point(100, 100); path.moveTo(start); path.lineTo(start.add([ 200, -50 ])); view.draw(); { |
Если загрязнение глобальной области видимости действительно недопустимо, вторая стратегия позволяет обойти это, используя устрашающий оператор with(). Это половина хитростей, которую Paper.js применяет внутри для определения области видимости каждого PaperScript в собственном объекте PaperScope:
1 2 3 4 5 6 7 8 9 10 11 | window.onload = function() { paper.setup('myCanvas'); with (paper) { var path = new Path(); path.strokeColor = 'black'; var start = new Point(100, 100); path.moveTo(start); path.lineTo(start.add([ 200, -50 ])); view.draw(); } } |
PaperScript распознает несколько специальных обработчиков событий, когда они объявлены как глобальные функции, тогда как в JavaScript их необходимо вручную установить на соответствующий объект. Два таких обработчика — onFrame и onResize, оба принадлежат классу View. представление создается автоматически, если мы используем функцию paperScope.setup(canvas), как в примерах выше. Итак, все, что нам нужно сделать, это установить эти обработчики на существующий объект представления:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/javascript"> paper.install(window); window.onload = function() { paper.setup('myCanvas'); var path = new Path.Rectangle([75, 75], [100, 100]); path.strokeColor = 'black'; view.onFrame = function(event) { // На каждом кадре поверните траекторию на 3 градуса.: path.rotate(3); } } </script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> </html> |
Как и в случае с обработчиками представлений, PaperScript упрощает и скрывает работу с объектами Tool, заставляя обработчики инструментов казаться глобальными и создавая для нас инструмент на лету, если какой-либо из этих обработчиков присутствует: onMouseDown, onMouseUp, onMouseDrag, onMouseMove и т.д..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/javascript"> paper.install(window); window.onload = function() { paper.setup('myCanvas'); // Создайте простой инструмент для рисования: var tool = new Tool(); var path; // Определите обработчик mousedown и mousedrag tool.onMouseDown = function(event) { path = new Path(); path.strokeColor = 'black'; path.add(event.point); } tool.onMouseDrag = function(event) { path.add(event.point); } } </script> </head> <body> <canvas id="myCanvas" resize></canvas> </body> </html> |
Следующий пример показывает, насколько легко создать несколько инструментов рисования и переключаться между ними с помощью простого пользовательского интерфейса, в данном случае всего двух HTML-ссылок, которые активируют тот или иной инструмент:
1 2 3 4 5 6 7 8 9 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 | <!DOCTYPE html> <html> <head> <script type="text/javascript" src="js/paper.js"></script> <script type="text/javascript"> paper.install(window); var tool1, tool2; window.onload = function() { paper.setup('myCanvas'); var path; function onMouseDown(event) { path = new Path(); path.strokeColor = 'black'; path.add(event.point); } tool1 = new Tool(); tool1.onMouseDown = onMouseDown; tool1.onMouseDrag = function(event) { path.add(event.point); } tool2 = new Tool(); tool2.minDistance = 20; tool2.onMouseDown = onMouseDown; tool2.onMouseDrag = function(event) { path.arcTo(event.point); } } </script> </head> <body> <a href="#" onclick="tool1.activate();">Lines</a> <a href="#" onclick="tool2.activate();">Clouds</a> <canvas id="myCanvas" resize></canvas> </body> </html> |
Вывод:
В этой статье вы прочитали про библиотеку paper.js которая нужна для работы с Canvas, думаю вам было интересно и самое главное полезно и вы узнали для себя что то новое, если вас заинтересовала библиотека, то переходите в официальную документацию, там вы узнаете о ней чуть больше.
Подписываетесь на соц-сети:
Оценка:
Загрузка...