Позиционирование объектов

Для работы с Two.js первым шагом является создание экземпляра сцены. Это позволяет определить размеры холста и метод рендеринга (SVG, Canvas или WebGL):

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.canvas // можно использовать Two.Types.svg или Two.Types.webgl
}).appendTo(document.body);

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

  • width и height задают размеры визуальной области.
  • type определяет способ рендеринга графики, влияя на производительность и качество.

Координаты объектов

В Two.js объекты позиционируются через свойства translation.x и translation.y. Это определяет точку центра объекта на сцене.

const circle = two.makeCircle(0, 0, 50);
circle.translation.set(200, 150);
  • translation.x – горизонтальная координата.
  • translation.y – вертикальная координата.
  • Метод set(x, y) позволяет одновременно задавать обе координаты.

Примечание: В Two.js координатная система начинается с верхнего левого угла холста (0,0).

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

Для упрощения управления несколькими объектами применяются группы (Two.Group). Позиция группы влияет на все её дочерние элементы:

const group = two.makeGroup();
group.translation.set(300, 200);

const rect = two.makeRectangle(0, 0, 100, 50);
const ellipse = two.makeEllipse(50, 50, 60, 30);

group.add(rect, ellipse);
  • Положение группы смещает все объекты внутри относительно центра группы.
  • Можно комбинировать смещения группы и индивидуальные смещения объектов для сложных композиций.

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

Помимо свойства translation, объекты имеют position, которое является псевдосвойством для чтения и записи координат:

circle.position.x = 400;
circle.position.y = 300;
  • position удобен для динамических изменений и анимаций.
  • Изменения через position автоматически обновляют translation.

Поворот и позиция

Позиция объекта в Two.js влияет на его точку вращения. По умолчанию центр объекта совпадает с точкой вращения:

circle.rotation = Math.PI / 4; // поворот на 45 градусов
  • Поворот производится вокруг центра, заданного translation.
  • Для изменения центра вращения используется origin:
circle.origin.set(50, 50); // смещаем точку вращения относительно центра

Анимация позиции

Two.js позволяет плавно анимировать перемещение объектов с помощью two.update() или внешних библиотек:

let x = 0;
two.bind('upd ate', function() {
  circle.translation.x = x;
  x += 1;
}).play();
  • bind('upd ate', callback) регистрирует функцию, вызываемую каждый кадр.
  • Свойства translation можно изменять для создания сложных движений.

Относительное позиционирование

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

const parent = two.makeGroup();
const child = two.makeRectangle(0, 0, 50, 50);

child.translation.se t(100, 50);
parent.add(child);
parent.translation.se t(200, 200);
  • Положение дочернего объекта суммируется с положением родителя.
  • Это позволяет строить сцены с независимыми элементами и управлять ими централизованно.

Ограничения и особенности

  • Two.js работает в пикселях, но допускает масштабирование через scale.
  • Прямое изменение DOM-атрибутов объектов SVG не рекомендуется, так как нарушает внутренние связи библиотеки.
  • Для точного позиционирования лучше использовать комбинацию translation, origin и групп.

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

Для упрощения позиционирования объектов относительно друг друга часто используют сетку или направляющие:

const gridSize = 50;
for (let i = 0; i < 10; i++) {
  for (let j = 0; j < 8; j++) {
    const dot = two.makeCircle(i * gridSize, j * gridSize, 5);
    dot.fill = '#999';
  }
}
  • Сетка помогает выравнивать объекты визуально.
  • Легко комбинируется с анимацией и группами.

Итоговые рекомендации по позиционированию

  1. Использовать translation для изменения положения объектов.
  2. Применять группы для управления несколькими объектами одновременно.
  3. Учитывать origin при поворотах и масштабировании.
  4. Для динамических сцен использовать привязку к событию update.
  5. Построение иерархий объектов облегчает комплексное позиционирование.

Такой подход обеспечивает точное, гибкое и масштабируемое управление положением объектов на сцене в Two.js.

Оглавление