Установка и подключение

Paper.js — это векторная графическая библиотека на JavaScript, ориентированная на работу с HTML5 Canvas. Для работы с ней необходимо правильно подключить библиотеку и подготовить среду.

Подключение через CDN

Самый быстрый способ начать работу — использовать Content Delivery Network (CDN). Это позволяет подключить библиотеку без загрузки файлов на сервер:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.13.15/paper-full.min.js"></script>

Особенности использования через CDN:

  • paper-full.min.js содержит все функциональные возможности библиотеки.
  • Подключение через CDN гарантирует актуальность версии, если указана последняя.
  • Можно использовать локальную версию, если требуется оффлайн работа.

Локальная установка

Для проектов, где важна автономность или контроль версий, Paper.js можно скачать и подключить локально:

  1. Перейти на официальный сайт или GitHub репозиторий Paper.js.
  2. Скачать файл paper-full.js или минифицированный paper-full.min.js.
  3. Разместить его в проекте и подключить аналогично CDN:
<script type="text/javascript" src="js/paper-full.min.js"></script>

Подключение через NPM

Для проектов с использованием сборщиков (Webpack, Parcel, Vite) удобно устанавливать Paper.js через NPM:

npm install paper

После установки можно импортировать библиотеку в Jav * aScript:

import paper from 'paper';

Инициализация Paper.js для конкретного <canvas> осуществляется через:

const canvas = document.getElementById('myCanvas');
paper.setup(canvas);

Подготовка HTML

Paper.js работает с элементом <canvas>, который должен быть определён в HTML. Минимальная разметка:

<canvas id="myCanvas" width="800" height="600"></canvas>

Важные моменты:

  • Указание размеров <canvas> через атрибуты width и height обязательно. CSS размеры не заменяют атрибуты Canvas.
  • Для корректной работы Paper.js необходимо, чтобы элемент <canvas> был доступен на момент вызова paper.setup().

Использование режима скриптов Paper.js

Paper.js поддерживает специальный режим, когда скрипт указывается с типом text/paperscript. В этом случае контекст Paper.js автоматически создается для указанного Canvas:

<canvas id="myCanvas" width="800" height="600"></canvas>
<script type="text/paperscript" canvas="myCanvas">
    var circle = new Path.Circle({
        center: [150, 150],
        radius: 50,
        fillColor: 'blue'
    });
</script>

Особенности PaperScript:

  • Нет необходимости вызывать paper.setup() вручную.
  • Все объекты создаются в контексте выбранного Canvas.
  • PaperScript поддерживает синтаксис JavaScript, но с дополнительными упрощениями для работы с графикой.

Инициализация и очистка проекта

После подключения библиотеки и Canvas можно управлять проектом:

// Инициализация
paper.setup('myCanvas');

// Очистка всех объектов
paper.project.activeLayer.removeChildren();
paper.view.draw();
  • paper.project.activeLayer — слой, на котором создаются все объекты.
  • removeChildren() удаляет все элементы на слое.
  • paper.view.draw() обновляет Canvas.

Поддержка Retina и масштабирования

Для корректного отображения на устройствах с высокой плотностью пикселей рекомендуется масштабировать Canvas:

canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
paper.view.viewSize = new paper.Size(canvas.width, canvas.height);
  • viewSize определяет размеры области рисования.
  • Масштабирование позволяет сохранять чёткие линии и фигуры на Retina-дисплеях.

Автоматическая анимация

Paper.js предоставляет объект view для управления кадрами:

paper.view.onFr ame = function(event) {
    // event.delta — время с предыдущего кадра
};
  • Каждый кадр вызывается автоматически после подключения и настройки Canvas.
  • Это упрощает создание анимаций без ручного обновления Canvas через requestAnimationFrame.

Выводы по подключению

  • Подключение через CDN — быстрый старт.
  • Локальная установка подходит для автономных проектов.
  • NPM установка удобна для современных сборщиков.
  • PaperScript облегчает создание графики без ручного управления проектом.
  • Инициализация Canvas и корректное масштабирование критичны для качественного отображения.

Правильная установка и подключение Paper.js формирует основу для работы с векторной графикой и анимацией, обеспечивая полную функциональность библиотеки.

Оглавление