Что такое Paper.js

Paper.js — это мощная графическая библиотека на JavaScript, предназначенная для работы с векторной графикой в HTML5 Canvas. Она упрощает создание, редактирование и анимацию сложных графических объектов, предоставляя объектно-ориентированное API для рисования кривых, фигур, текста и обработки событий.

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

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

Через CDN:

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

Локально:

<script type="text/javascript" src="path/to/paper-full.min.js"></script>

Для работы с Canvas необходимо указать атрибут type="text/paperscript" и ссылку на соответствующий canvas:

<canvas id="myCanvas" resize></canvas>
<script type="text/paperscript" canvas="myCanvas">
    var circle = new Path.Circle({
        center: [80, 50],
        radius: 30,
        fillColor: 'red'
    });
</script>

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

Paper.js строится вокруг нескольких ключевых объектов:

  • PaperScope — корневой объект, управляющий состоянием проекта.
  • Project — содержит все элементы и слои, относящиеся к конкретной сцене Canvas.
  • Layer — слой для группировки элементов, позволяет управлять видимостью и порядком отрисовки.
  • Item — базовый класс для всех объектов (фигуры, кривые, группы, текст).
  • Path — векторный путь, состоящий из сегментов и кривых.
  • Point — координата в двумерном пространстве.
  • Color — управление цветом объектов.
  • Group — объединяет несколько объектов для совместной трансформации.

Создание и манипуляция формами

Прямые и кривые линии:

var path = new Path();
path.strokeColor = 'black';
path.add(new Point(30, 30));
path.add(new Point(100, 30));
path.add(new Point(100, 100));

Круги и прямоугольники:

var circle = new Path.Circle(new Point(50, 50), 30);
circle.fillColor = 'blue';

var rectangle = new Path.Rectangle(new Point(100, 100), new Size(80, 40));
rectangle.fillColor = 'green';

Манипуляции объектами:

  • position — перемещение объекта.
  • rotate(angle) — вращение.
  • scale(factor) — масштабирование.
  • remove() — удаление объекта из сцены.

Цвет и стилизация

Paper.js позволяет задавать как простые цвета, так и градиенты:

circle.fillColor = 'red';
circle.strokeColor = 'black';
circle.strokeWidth = 2;

var gradient = new Gradient(['yellow', 'orange', 'red']);
circle.fillColor = new Color(gradient, circle.bounds.topLeft, circle.bounds.bottomRight);

Цвета можно задавать в формате RGB, HSB, а также с прозрачностью через альфа-канал.

Сегменты и кривые Безье

Path в Paper.js состоит из сегментов, каждый из которых может иметь контрольные точки для кривых Безье.

var path = new Path();
path.strokeColor = 'purple';
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));

var segment = path.segments[1];
segment.handleIn = new Point(-30, 0);
segment.handleOut = new Point(30, 0);

Сегменты позволяют создавать плавные кривые, управляя формой линии с высокой точностью.

Группировка объектов и слои

Group объединяет несколько объектов для совместной трансформации:

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

Слои управляют порядком отрисовки:

var layer1 = new Layer();
var layer2 = new Layer();
layer1.addChild(circle);
layer2.addChild(rectangle);
layer2.bringToFront();

События мыши и анимация

Paper.js интегрируется с событиями мыши и позволяет создавать интерактивные элементы:

circle.onMouseEn ter = function(event) {
    this.fillColor = 'orange';
};

circle.onMouseLe ave = function(event) {
    this.fillColor = 'blue';
};

function onFrame(event) {
    circle.rotate(3);
}

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

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

Добавление текста на Canvas реализуется через объект PointText:

var text = new PointText(new Point(50, 150));
text.justification = 'center';
text.fillColor = 'black';
text.fontSize = 20;
text.content = 'Привет, Paper.js';

Текст можно вращать, масштабировать и включать в группы с другими объектами.

Экспорт и импорт данных

Paper.js поддерживает сериализацию объектов в JSON и SVG:

var json = project.exportJSON();
var svg = project.exportSVG({asString: true});

Импорт позволяет восстановить объекты из ранее сохраненных данных:

project.importJSON(json);

Математические операции с объектами

Библиотека предоставляет возможности для сложных вычислений:

  • Булевы операции (объединение, вычитание, пересечение):
var result = circle.subtract(rectangle);
result.fillColor = 'pink';
  • Векторные операции с Point: сложение, вычитание, нормализация, умножение на скаляр.

Вывод

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

Оглавление