Размеры холста и координатная система

В Paper.js холст определяется элементом <canvas> в HTML. Основные свойства холста, влияющие на графику, это ширина и высота. При создании проекта Paper.js с помощью paper.setup(canvas) холст получает размеры, заданные в атрибутах width и height HTML-элемента.

const canvas = document.getElementById('myCanvas');
canvas.width = 800;
canvas.height = 600;
paper.setup(canvas);

Здесь создаётся холст размером 800x600 пикселей. В Paper.js все координаты и размеры объектов будут вычисляться относительно этих значений.

Динамическое изменение размеров

Размеры холста можно изменять в процессе работы, что особенно важно для адаптивных интерфейсов. После изменения размеров требуется вызвать view.update() для корректного отображения:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
paper.view.viewSize = new paper.Size(canvas.width, canvas.height);
paper.view.update();

Использование paper.view.viewSize позволяет синхронизировать внутреннюю систему координат Paper.js с реальными размерами HTML-элемента.

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

В Paper.js применяется декартова система координат, где начало координат (0, 0) находится в верхнем левом углу холста, ось X направлена вправо, ось Y — вниз. Все объекты, создаваемые на холсте, используют эту систему для позиционирования.

const circle = new paper.Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red'
});

В этом примере центр круга расположен на 100 пикселей вправо и 100 пикселей вниз от верхнего левого угла холста.

Векторы и точки

Paper.js активно использует объекты Point для задания координат:

const point = new paper.Point(200, 150);
const rectangle = new paper.Path.Rectangle({
    point: point,
    size: [100, 50],
    fillColor: 'blue'
});

Point поддерживает арифметические операции: сложение, вычитание, умножение на скаляр, что удобно для вычисления относительных позиций объектов.

const p1 = new paper.Point(50, 50);
const p2 = new paper.Point(100, 100);
const p3 = p1.add(p2); // Point { x: 150, y: 150 }

Система координат вида (view)

Объект paper.view управляет видимой областью холста. Размер view.size совпадает с размером холста, а view.center указывает центральную точку видимой области:

console.log(paper.view.size);   // Размер холста
console.log(paper.view.center); // Центр холста

view.center особенно полезен при позиционировании объектов относительно центра холста:

const centerCircle = new paper.Path.Circle({
    center: paper.view.center,
    radius: 75,
    fillColor: 'green'
});

Координаты относительно центра

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

const offset = new paper.Point(50, -30);
const newPosition = paper.view.center.add(offset);
const rect = new paper.Path.Rectangle({
    point: newPosition,
    size: [60, 40],
    fillColor: 'orange'
});

Масштабирование и трансформации

Paper.js поддерживает трансформации холста через view.zoom и view.matrix. Изменение масштаба позволяет увеличивать или уменьшать видимую область:

paper.view.zoom = 2; // Увеличение в 2 раза
paper.view.zoom = 0.5; // Уменьшение в 2 раза

Трансформации влияют на все объекты относительно центра view.center. Например, масштабирование сдвигает объекты так, чтобы центральная точка оставалась на месте.

paper.view.center = new paper.Point(400, 300);
paper.view.zoom = 1.5;

Привязка к пиксельной сетке

Paper.js работает в векторной системе координат, но при рендеринге на <canvas> важно учитывать выравнивание по пикселям, чтобы линии выглядели чётко. Для этого можно использовать метод position.round() для объектов:

circle.position = circle.position.round();

Это округляет координаты объекта до целых пикселей, предотвращая размытие линий при отрисовке.

Сводка ключевых понятий

  • Размер холста задаётся через HTML и paper.view.viewSize.
  • Координаты объектов измеряются в пикселях, начало в верхнем левом углу.
  • Point и Size используются для точного позиционирования и размеров.
  • view.center позволяет работать относительно центра холста.
  • view.zoom и view.matrix управляют масштабированием и трансформациями.
  • Округление координат предотвращает размытие линий на экране.

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

Оглавление