Закругленные прямоугольники

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

Инициализация сцены

Для начала создается экземпляр Two с указанием размеров холста:

const elem = document.getElementById('drawing');
const two = new Two({
  width: 800,
  height: 600,
  autostart: true
}).appendTo(elem);

Параметр autostart позволяет автоматически запускать рендеринг анимации после создания фигур.

Создание простого прямоугольника

Базовый прямоугольник создается так:

const rect = two.makeRectangle(400, 300, 200, 100);

Здесь:

  • 400, 300 — координаты центра прямоугольника;
  • 200, 100 — ширина и высота.

Добавление скругленных углов

Для скругления углов используется свойство radius:

rect.radius = 20;
rect.fill = '#3498db';
rect.stroke = '#2980b9';
rect.linewidth = 4;

Пояснения:

  • radius задает радиус закругления углов в пикселях. При значении 0 углы остаются острыми.
  • fill отвечает за заливку фигуры.
  • stroke и linewidth управляют цветом и толщиной обводки.

Индивидуальное скругление углов

В стандартной реализации Two.js Two.Rectangle поддерживает единый радиус для всех углов. Для разных значений скругления углов необходимо использовать метод path с ручным построением:

const x = 400, y = 300, w = 200, h = 100;
const rTopLeft = 20, rTopRight = 40, rBottomRight = 10, rBottomLeft = 30;

const shape = two.makePath(
  x - w/2 + rTopLeft, y - h/2,
  x + w/2 - rTopRight, y - h/2,
  x + w/2, y - h/2 + rTopRight,
  x + w/2, y + h/2 - rBottomRight,
  x + w/2 - rBottomRight, y + h/2,
  x - w/2 + rBottomLeft, y + h/2,
  x - w/2, y + h/2 - rBottomLeft,
  x - w/2, y - h/2 + rTopLeft,
  true
);
shape.fill = '#e74c3c';
shape.stroke = '#c0392b';
shape.linewidth = 3;

В этом примере каждый угол имеет свой радиус. Метод makePath строит контур по заданным точкам, а замыкание контура (true) обеспечивает правильное соединение начальной и конечной точек.

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

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

let radius = 0;
two.bind('upd ate', function(frameCount) {
  radius = 20 + 10 * Math.sin(frameCount * 0.05);
  rect.radius = radius;
}).play();

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

  • Свойство radius может динамически изменяться.
  • bind('update', callback) позволяет обновлять свойства при каждом кадре анимации.
  • Использование синусоиды создает эффект пульсации скругления.

Комбинирование с другими свойствами

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

rect.opacity = 0.8;
rect.rotation = Math.PI / 8;
rect.scale = 1.2;
  • opacity регулирует прозрачность.
  • rotation задает угол поворота в радианах.
  • scale масштабирует фигуру относительно её центра.

Применение для интерфейсов и кнопок

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

rect.fill = '#2ecc71';
rect.stroke = '#27ae60';
rect.linewidth = 5;

rect._renderer.elem.addEventListener('mouseover', () => {
  rect.fill = '#27ae60';
});

rect._renderer.elem.addEventListener('mouseout', () => {
  rect.fill = '#2ecc71';
});

Важно: Two.js напрямую не поддерживает события DOM для фигур, поэтому используется доступ через _renderer.elem для подключения обработчиков.

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

При изменении размеров холста закругленные прямоугольники можно масштабировать пропорционально:

two.renderer.setSize(window.innerWidth, window.innerHeight);
rect.position.se t(window.innerWidth / 2, window.innerHeight / 2);
rect.width = window.innerWidth / 4;
rect.height = window.innerHeight / 6;

Это обеспечивает корректное отображение на экранах разных размеров без потери пропорций углов.

Итоговая структура прямоугольника

Закругленный прямоугольник в Two.js — это не просто фигура с радиусом, а полноценный объект, поддерживающий:

  • динамическое изменение размеров и углов,
  • трансформации (поворот, масштабирование),
  • заливку и обводку с прозрачностью,
  • анимацию свойств через bind('update'),
  • кастомные формы с индивидуальными радиусами углов через makePath.

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

Оглавление