Responsive design

Адаптивный дизайн в Paper.js строится на динамическом управлении размером и расположением элементов в зависимости от размера холста. Холст Paper.js создается через тег <canvas> и управляется объектом PaperScope. Для обеспечения адаптивности важна правильная привязка координат и масштабирование элементов.

Настройка холста для адаптивности

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

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    paper.view.viewSize = new paper.Size(canvas.width, canvas.height);
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

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

  • paper.view.viewSize синхронизируется с размерами <canvas>.
  • Обработчик события resize позволяет динамически подстраивать сцену под новые размеры окна.

Масштабирование элементов

Использование относительных координат вместо абсолютных обеспечивает корректное масштабирование. Например, если нужно создать круг, центрированный в середине окна:

const center = paper.view.center;
const radius = Math.min(paper.view.size.width, paper.view.size.height) * 0.1;
const circle = new paper.Path.Circle(center, radius);
circle.fillColor = 'lightblue';

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

  • Центр и радиус вычисляются на основе размеров холста.
  • Процентное отношение (* 0.1) позволяет элементу оставаться пропорциональным при изменении окна.

Привязка объектов к краям и сетке

Для создания интерфейсных элементов удобно использовать привязку к краям:

function createRectangle(margin = 20) {
    const rect = new paper.Path.Rectangle({
        point: [margin, margin],
        size: [paper.view.size.width - 2 * margin, paper.view.size.height / 4],
        fillColor: 'lightgreen'
    });
    return rect;
}
let header = createRectangle();

Подходы:

  • point и size вычисляются динамически через paper.view.size.
  • Можно применять процентное масштабирование для создания сетки или блоков, адаптирующихся к размеру окна.

Реакция на изменение размера

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

function updateScene() {
    circle.position = paper.view.center;
    header.bounds.width = paper.view.size.width - 40;
}
window.addEventListener('resize', updateScene);

Рекомендации:

  • Использовать bounds для изменения размеров прямоугольников.
  • Центрирование объектов через position гарантирует равномерное расположение при любом размере холста.

Использование групп и слоев

Группы позволяют масштабировать набор объектов как единое целое:

const group = new paper.Group([circle, header]);
group.scale(paper.view.size.width / 800);

Преимущества:

  • Масштабирование группы пропорционально изменяет все элементы.
  • Удобно при создании сложных интерфейсов, где элементы должны сохранять относительное расположение.

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

Текстовые объекты также требуют адаптивного подхода:

const text = new paper.PointText({
    point: [paper.view.size.width / 2, paper.view.size.height * 0.9],
    justification: 'center',
    fontSize: paper.view.size.width * 0.03,
    fillColor: 'black'
});

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

  • fontSize зависит от ширины или высоты холста.
  • justification и point обеспечивают корректное позиционирование при изменении размеров окна.

Анимация с учетом размеров холста

При создании анимации важно учитывать текущий размер холста:

paper.view.onFr ame = function(event) {
    circle.position.x += 2;
    if(circle.position.x - circle.bounds.width / 2 > paper.view.size.width) {
        circle.position.x = -circle.bounds.width / 2;
    }
}

Принцип:

  • Использование paper.view.size вместо фиксированных координат позволяет объектам адаптироваться к изменению окна.
  • Проверка границ с учетом размеров объекта предотвращает выход за пределы холста.

Итоговая структура адаптивной сцены

  1. Инициализация холста и синхронизация с размером окна.
  2. Создание элементов с использованием относительных координат и размеров.
  3. Обработка события resize для пересчета координат и масштабов.
  4. Применение групп и слоев для упрощенного масштабирования сложных конструкций.
  5. Масштабирование текста и элементов интерфейса в зависимости от размеров окна.
  6. Корректная анимация с учетом динамических размеров холста.

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

Оглавление