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

Библиотека Two.js строится вокруг объекта Two, который управляет всей графикой и рендерингом. Для создания холста используется конструктор с объектом настроек:

const elem = document.getElementById('draw-area');
const params = {
  width: 800,        // Ширина холста в пикселях
  height: 600,       // Высота холста в пикселях
  type: Two.Types.svg // Тип рендеринга: svg, canvas или webgl
};
const two = new Two(params).appendTo(elem);

  • width и height задают размеры холста, влияя на координатную систему.

  • type определяет механизм рендеринга, что важно для производительности и совместимости:

    • Two.Types.svg – векторная графика, масштабируемая, хорошо подходит для статических изображений.
    • Two.Types.canvas – растровая графика, высокая скорость рендеринга, ограниченная масштабируемость.
    • Two.Types.webgl – аппаратное ускорение для сложной анимации.

Система координат

Система координат Two.js строится по принципу классической двухмерной плоскости:

  • Начало координат (0, 0) находится в левом верхнем углу холста.
  • Ось X направлена вправо, ось Y – вниз.
  • Единицы измерения – пиксели по умолчанию, совпадающие с размерами холста.

Создание базовой точки и её визуализация:

const point = two.makeCircle(0, 0, 5); // Круг с центром в начале координат
point.fill = '#FF0000';
point.stroke = 'none';
two.update();

Для удобства работы с координатами можно использовать смещения или трансформации через translation, что особенно важно при сложных композициях.

Изменение размеров холста после создания

Two.js позволяет динамически изменять размеры холста, что автоматически пересчитывает координаты рендеринга:

two.width = 1024;
two.height = 768;
two.update();

Важно помнить, что изменение размеров не масштабирует уже созданные объекты – их координаты остаются прежними. Для масштабирования объектов используют группы (Two.Group) и методы трансформации.

Относительные и абсолютные координаты

  • Абсолютные координаты привязаны к левому верхнему углу холста.
  • Относительные координаты реализуются через Group и локальные смещения.

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

const group = two.makeGroup();
const rect1 = two.makeRectangle(50, 50, 100, 50);
const rect2 = two.makeRectangle(150, 50, 100, 50);
group.add(rect1, rect2);

// Сдвиг всей группы
group.translation.set(200, 100);
two.update();

В этом примере оба прямоугольника перемещаются вместе, сохраняя свои локальные координаты относительно группы.

Масштабирование и адаптивность холста

Для адаптивных интерфейсов Two.js предоставляет возможность работать с соотношением сторон и масштабом:

two.renderer.setSize(window.innerWidth, window.innerHeight);
two.scene.scale = 0.5; // Масштабирование всех объектов
two.update();
  • setSize обновляет размеры холста.
  • Свойство scale сцены позволяет уменьшать или увеличивать отображение всех объектов без изменения их координат.

Оси и вспомогательные линии

Для визуализации системы координат удобно создавать оси и сетку:

for (let x = 0; x <= two.width; x += 50) {
  const line = two.makeLine(x, 0, x, two.height);
  line.stroke = '#ccc';
  line.linewidth = 1;
}

for (let y = 0; y <= two.height; y += 50) {
  const line = two.makeLine(0, y, two.width, y);
  line.stroke = '#ccc';
  line.linewidth = 1;
}

two.update();

Так создаётся равномерная сетка с шагом 50 пикселей, которая служит ориентиром при размещении объектов.

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

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

const centerX = two.width / 2;
const centerY = two.height / 2;

const centerCircle = two.makeCircle(centerX, centerY, 20);
centerCircle.fill = '#0000FF';
two.update();

Центр холста часто применяется как точка вращения для анимаций и трансформаций.

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

Оглавление