Прямоугольники

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

// Инициализация экземпляра Two
const two = new Two({ width: 800, height: 600 }).appendTo(document.body);

// Создание прямоугольника
const rect = two.makeRectangle(200, 150, 100, 50);

Здесь первые два параметра (200, 150) задают координаты центра прямоугольника, а следующие два (100, 50) — ширину и высоту соответственно. Важно помнить, что позиция задается через центр, а не через левый верхний угол.

Настройка внешнего вида прямоугольника

Прямоугольники в Two.js имеют свойства, позволяющие детально контролировать их внешний вид:

  • fill — цвет заливки.
  • stroke — цвет границы.
  • linewidth — толщина границы.
  • opacity — прозрачность объекта.
  • rotation — угол поворота в радианах.
  • scale — масштабирование по оси X и Y.

Пример:

rect.fill = '#3498db';
rect.stroke = '#2980b9';
rect.linewidth = 4;
rect.opacity = 0.8;
rect.rotation = Math.PI / 6; // поворот на 30 градусов

Анимация прямоугольников

Two.js предоставляет встроенные методы для анимации объектов через Two.Animation или прямое изменение свойств в методе two.update(). Основные параметры для анимации — это позиция, масштаб, поворот, цвет.

let angle = 0;
two.bind('upd ate', function(frameCount) {
  angle += 0.02;
  rect.rotation = angle;
  rect.scale = 1 + 0.5 * Math.sin(angle);
}).play();

В этом примере прямоугольник плавно вращается и изменяет размер по синусоидальной кривой, создавая эффект «пульсации».

Взаимодействие с событиями

Two.js позволяет отслеживать взаимодействие с объектами, используя DOM-события канваса. Прямоугольники могут реагировать на клики и наведение мыши, что позволяет создавать интерактивные интерфейсы.

two.renderer.domElement.addEventListener('mousemove', function(e) {
  const x = e.offsetX;
  const y = e.offsetY;

  if (rect.containsPoint(new Two.Vector(x, y))) {
    rect.fill = '#e74c3c';
  } else {
    rect.fill = '#3498db';
  }
});

Метод containsPoint проверяет, попадает ли точка в область прямоугольника, что удобно для интерактивных визуализаций.

Комбинирование прямоугольников в группы

Для управления множественными прямоугольниками удобно использовать Two.Group. Группа позволяет применять трансформации ко всем элементам одновременно.

const group = two.makeGroup(rect);
const rect2 = two.makeRectangle(300, 150, 80, 40);
group.add(rect2);

group.rotation = Math.PI / 12;
group.scale = 1.2;

Все объекты внутри группы вращаются и масштабируются синхронно, что упрощает работу с комплексными сценами.

Прямоугольники с закругленными углами

Two.js поддерживает закругленные углы через свойство radius. Его можно задавать как единое число для всех углов или как объект с индивидуальными значениями.

const roundedRect = two.makeRectangle(400, 300, 120, 60);
roundedRect.radius = 15; // одинаковый радиус для всех углов

// индивидуальные углы
// roundedRect.radius = { tl: 10, tr: 20, bl: 5, br: 15 };

Закругленные прямоугольники полезны для кнопок, карточек и визуальных панелей.

Комбинация прямоугольников и текстовых элементов

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

const text = two.makeText('Пример', 400, 300);
text.size = 24;
text.alignment = 'center';

Используя группу, можно объединить прямоугольник и текст:

const buttonGroup = two.makeGroup(rect, text);
buttonGroup.translation.se t(400, 300);

Практические советы

  • Для плавной анимации лучше использовать two.bind('update', callback) вместо setInterval.
  • Всегда проверять координаты центра при создании прямоугольника, чтобы избежать смещения на экране.
  • Для сложных сцен рекомендуется использовать группы для логической организации объектов.
  • Использование закругленных углов и прозрачности делает интерфейс визуально более современным.

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

Оглавление