Синтаксис PaperScript

PaperScript — это расширение JavaScript, созданное специально для библиотеки Paper.js, которое позволяет писать графику и анимацию в более декларативном и лаконичном виде. Для использования PaperScript необходимо подключить библиотеку Paper.js в HTML и назначить скрипт с типом text/paperscript:

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

Ключевой момент: атрибут canvas связывает скрипт с конкретным HTML-элементом <canvas>. В PaperScript не требуется явно получать контекст canvas через getContext('2d') — все операции происходят автоматически через Paper.js.

Основные объекты PaperScript

Point

Point представляет координаты на плоскости. Используется для задания положения элементов, смещения и вычислений.

var p1 = new Point(50, 50);
var p2 = new Point(200, 100);
var vector = p2 - p1; // Вектор между точками

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

  • Поддержка арифметических операций (+, -, *, /).
  • Методы: add(), subtract(), multiply(), divide(), length, normalize().
  • Можно передавать массив [x, y] вместо объекта Point.

Path

Path — основной строитель геометрических фигур. Позволяет создавать линии, кривые и замкнутые контуры.

var path = new Path();
path.strokeColor = 'black';
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(100, 100));
path.closed = true; // замыкает фигуру

Ключевые методы Path:

  • add(point) — добавляет точку к пути.
  • removeSegment(index) — удаляет сегмент.
  • smooth() — сглаживает углы.
  • length — длина пути.
  • position — центр пути.

Также доступно создание стандартных форм через конструкторы:

  • Path.Circle(center, radius)
  • Path.Rectangle(from, to)
  • Path.Ellipse(bounds)

Raster

Объект Raster используется для работы с изображениями:

var raster = new Raster('image.jpg'); // загрузка по URL
raster.position = view.center;
raster.scale(0.5);

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

  • Методы scale(), rotate(), translate() изменяют изображение.
  • Свойство opacity задает прозрачность.
  • raster.getPixel(point) позволяет получать цвет конкретного пикселя.

Цвет и стили

PaperScript предоставляет удобное API для работы с цветами и стилями:

var circle = new Path.Circle([100, 100], 50);
circle.fillColor = 'blue';
circle.strokeColor = 'black';
circle.strokeWidth = 5;
circle.opacity = 0.6;

Форматы цвета:

  • Строка 'red', 'rgba(255,0,0,0.5)'
  • new Color(r, g, b, a)
  • Градиенты: Gradient, GradientStop, используются в fillColor или strokeColor.

Координатная система и view

view — это глобальный объект, представляющий текущий холст. Через него можно управлять размерами, анимацией и трансформациями.

console.log(view.size); // Размер canvas
view.onFr ame = function(event) {
    path.rotate(1); // Анимация: вращение пути каждый кадр
};
  • view.center — центр холста.
  • view.bounds — прямоугольная граница холста.
  • view.onFrame(event) — вызывается каждый кадр анимации, объект event содержит count и time.

События мыши и клавиатуры

PaperScript интегрирует обработку событий без необходимости использовать DOM напрямую:

function onMouseDown(event) {
    var circle = new Path.Circle(event.point, 20);
    circle.fillColor = 'green';
}

function onMouseDrag(event) {
    var path = new Path();
    path.strokeColor = 'black';
    path.add(event.lastPoint);
    path.add(event.point);
}

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

  • event.point — координаты события на холсте.
  • event.delta — вектор смещения при перетаскивании.
  • onKeyDown(event) и onKeyUp(event) для работы с клавишами.

Работа с группами и слоями

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

var group = new Group([circle, path]);
group.position = view.center;
group.rotate(45);
  • group.children — доступ к элементам внутри группы.
  • group.bounds, group.position аналогичны Path.

Layer позволяет управлять порядком отображения объектов:

var layer1 = new Layer();
var layer2 = new Layer();
layer1.addChild(circle);
layer2.addChild(rectangle);
layer2.activate(); // Все новые объекты попадут в layer2

Анимация и onFrame

Анимация в PaperScript строится через функцию onFrame, которая вызывается каждый кадр (~60 fps по умолчанию):

var ball = new Path.Circle([50, 50], 20);
ball.fillColor = 'orange';
var velocity = new Point(2, 3);

view.onFr ame = function(event) {
    ball.position += velocity;
    if (ball.bounds.right > view.size.width || ball.bounds.left < 0) velocity.x *= -1;
    if (ball.bounds.bottom > view.size.height || ball.bounds.top < 0) velocity.y *= -1;
};
  • event.delta — время с предыдущего кадра, полезно для физики.
  • Все трансформации (position, rotation, scale) могут быть изменены динамически.

Встроенные утилиты

PaperScript содержит ряд вспомогательных объектов и функций:

  • Point и Size для геометрических расчетов.
  • Rectangle и Circle для работы с прямоугольниками и кругами.
  • Matrix для продвинутых трансформаций.
  • Project для управления всеми элементами на холсте (project.activeLayer, project.clear()).

Отличия PaperScript от обычного JavaScript

  1. Автоматическое привязывание к холсту, нет необходимости получать контекст через canvas.getContext('2d').
  2. Возможность использовать синтаксис и структуры Paper.js напрямую, без new paper.Point(), если включен PaperScript.
  3. Простая обработка событий мыши и анимации через onFrame, onMouseDown, onMouseDrag, onKeyDown.

PaperScript обеспечивает лаконичное и декларативное описание векторной графики, позволяя сосредоточиться на логике рисования и анимации, избавляя от рутинной работы с DOM и контекстом canvas.

Оглавление