Первый проект

Для начала работы с Paper.js необходимо подключить библиотеку в HTML-документе. Существует два основных способа: через CDN или локальный файл. Пример подключения через CDN:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>
<canvas id="myCanvas" resize></canvas>
<script type="text/paperscript" canvas="myCanvas">
  // код Paper.js будет здесь
</script>

Ключевые моменты:

  • Атрибут type="text/paperscript" позволяет писать скрипты на Paper.js напрямую.
  • Атрибут canvas связывает скрипт с конкретным <canvas> элементом.
  • resize на <canvas> автоматически подстраивает размеры под контейнер.

Альтернативный способ — использование чистого JavaScript с объектом paper.setup(canvas):

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

В этом случае весь код пишется в обычном JS, и необходимо явно вызывать paper.view.draw() для обновления сцены, если изменения производятся вне событий.

Основные объекты и структуры

Paper.js строится на концепции слоёв (Layer), объектов (Item) и геометрических форм.

Item — базовый объект, от которого наследуются все фигуры, группы и текстовые объекты. Имеет свойства:

  • position — позиция центра объекта (Point), например circle.position = new Point(100, 100).
  • fillColor — заливка объекта (Color).
  • strokeColor и strokeWidth — цвет и ширина контура.
  • rotate(angle) — поворот на угол в градусах.

Простейший пример создания круга:

let circle = new Path.Circle({
  center: [150, 150],
  radius: 50,
  fillColor: 'red',
  strokeColor: 'black',
  strokeWidth: 2
});

Point — объект, описывающий координаты и векторы, используется для задания позиции, размеров и движения объектов:

let p1 = new Point(50, 50);
let p2 = new Point(200, 100);
let distance = p1.getDistance(p2);

Path — последовательность точек, образующая линию или фигуру. Можно создавать из массива точек или динамически добавлять сегменты:

let path = new Path();
path.strokeColor = 'blue';
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(100, 100));

Слои и группы

Слой (Layer) — контейнер для объектов, влияющий на порядок отрисовки. По умолчанию все объекты добавляются в активный слой. Для создания собственного слоя:

let layer = new Layer();
let rect = new Path.Rectangle([10, 10], [100, 50]);
rect.fillColor = 'green';
layer.addChild(rect);

Группа (Group) объединяет объекты, позволяя управлять ими как единым целым:

let group = new Group([circle, path]);
group.position = new Point(200, 200);
group.rotate(45);

Работа с цветом и стилями

Paper.js использует объект Color для заливки и контура. Цвет можно задавать строкой, RGB, HSB или градиентом.

Примеры:

circle.fillColor = 'orange';             // строкой
circle.strokeColor = new Color(0, 1, 0); // RGB (зелёный)
circle.fillColor = {
  gradient: {
    stops: ['red', 'yellow'],
    radial: true
  },
  origin: circle.position,
  destination: circle.bounds.rightCenter
};

Анимация и события

Paper.js поддерживает автоматическую отрисовку через onFrame, что позволяет создавать анимации:

let movingCircle = new Path.Circle([50, 50], 20);
movingCircle.fillColor = 'purple';

function onFrame(event) {
  movingCircle.position.x += 2;
  if (movingCircle.position.x > view.size.width) {
    movingCircle.position.x = 0;
  }
}

onMouseMove, onMouseDown, onMouseDrag — стандартные события для взаимодействия с мышью:

function onMouseMove(event) {
  circle.position = event.point;
}

function onMouseDown(event) {
  let dot = new Path.Circle(event.point, 5);
  dot.fillColor = 'black';
}

Трансформации

Перемещение, вращение, масштабирование применяются ко всем объектам:

circle.translate(new Point(50, 0)); // сдвиг на 50px по X
circle.rotate(30);                   // поворот на 30°
circle.scale(1.5);                   // увеличение в 1.5 раза

Матрицы трансформации (Matrix) позволяют комбинировать несколько действий и применять их к объектам программно:

let matrix = new Matrix();
matrix.translate(100, 50);
matrix.rotate(45);
circle.transform(matrix);

Текст и типографика

Paper.js поддерживает текстовые объекты (PointText):

let text = new PointText(new Point(100, 200));
text.justification = 'center';
text.fillColor = 'blue';
text.fontSize = 24;
text.content = 'Hello, Paper.js!';

Можно комбинировать с графикой, а также анимировать положение или цвет текста через onFrame.

Практическая структура проекта

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

  1. HTML с <canvas> и подключением Paper.js.
  2. Инициализация Paper.js через <script type="text/paperscript"> или через чистый JS.
  3. Создание базовых объектов (Path, Circle, Rectangle, Text).
  4. Настройка стилей (fillColor, strokeColor, strokeWidth).
  5. Добавление событий и анимации (onFrame, onMouseMove).
  6. Организация слоёв и групп для упрощения управления.
  7. Трансформации и динамика с использованием методов translate, rotate, scale.

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

Оглавление