View и управление отображением

В Paper.js объект View представляет собой область, в которой происходит визуализация всех элементов проекта. Он управляет канвой, размером окна, координатами и масштабом, а также взаимодействием с пользователем через события. Каждый проект автоматически создаёт объект view, который предоставляет доступ к его свойствам и методам.

Размер и центр канвы

Основные свойства объекта view:

  • view.size — возвращает объект типа Size с шириной и высотой канвы в пикселях.
  • view.bounds — возвращает прямоугольник (Rectangle), описывающий границы видимой области.
  • view.center — возвращает точку (Point), соответствующую центру канвы.
  • view.bounds.center — синоним view.center, используется для вычислений относительно границ.

Пример использования:

console.log(view.size);     // { width: 800, height: 600 }
console.log(view.center);   // Point { x: 400, y: 300 }

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

View управляет локальной координатной системой канвы. Координаты элементов определяются относительно верхнего левого угла view.bounds. Для работы с масштабом и смещением используются:

  • view.zoom — коэффициент масштабирования. Значение по умолчанию равно 1.
  • view.center — центрирование области просмотра.
  • view.matrix — матрица преобразований канвы, используемая для трансформаций координат.

Пример изменения масштаба и центра:

view.zoom = 2;                   // Увеличение области просмотра в 2 раза
view.center = new Point(200, 150); // Смещение центра канвы

Прокрутка и смещение

Для динамического перемещения по сцене можно использовать свойства и методы View:

  • view.scrollBy(point) — сдвигает вид на указанный вектор (Point).
  • view.scrollTo(point) — перемещает центр просмотра в указанную точку.
view.scrollBy(new Point(50, 0));  // Сдвиг влево на 50 пикселей
view.scrollTo(new Point(400, 300)); // Перемещение центра в точку (400, 300)

События View

Объект view поддерживает события, которые позволяют реагировать на изменения канвы:

  • onFrame(event) — вызывается на каждом кадре анимации. Свойство event.delta указывает время между кадрами.
  • onResize(event) — срабатывает при изменении размера канвы. event.size содержит новый размер.

Пример анимации:

var circle = new Path.Circle(view.center, 50);
circle.fillColor = 'red';

view.onFr ame = function(event) {
    circle.position.x += 2;          // Движение вправо
    if (circle.position.x > view.size.width) {
        circle.position.x = 0;       // Зацикливание движения
    }
};

Пример обработки изменения размера:

view.onRes ize = function(event) {
    console.log('Новый размер канвы: ' + event.size);
};

Преобразования координат

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

  • view.projectToView(point) — преобразует координату Paper.js в координату DOM.
  • view.viewToProject(point) — преобразует координату DOM в координату Paper.js.
var mousePoint = view.viewToProject(new Point(event.clientX, event.clientY));

Управление видимостью элементов

Хотя View управляет областью отображения, отдельные элементы сцены могут быть скрыты через свойства visible и opacity:

var rectangle = new Path.Rectangle([50, 50], [100, 100]);
rectangle.fillColor = 'blue';
rectangle.visible = false;  // Скрыть элемент

Оптимизация рендеринга

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

  • view.update() — принудительно обновляет канву.
  • view.pause() / view.resume() — временно приостанавливает или возобновляет обновления, что полезно при пакетных изменениях.
view.pause();
for (var i = 0; i < 100; i++) {
    new Path.Circle(new Point(i * 10, i * 10), 5).fillColor = 'green';
}
view.resume();
view.update();

Масштабирование с сохранением пропорций

Для корректного масштабирования при изменении размера окна используют метод view.fitBounds(rectangle, fill):

var rect = new Rectangle(new Point(0,0), new Size(200,100));
view.fitBounds(rect, true); // Масштабирование с сохранением пропорций

Применение к интерактивным сценам

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

Оглавление