Размер и начертание

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

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // или canvas, webgl
}).appendTo(document.body);
  • width — ширина области рисования в пикселях.
  • height — высота области рисования в пикселях.
  • type — тип рендерера, который определяет, как будут отображаться фигуры (svg, canvas, webgl).

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

two.renderer.setSize(window.innerWidth, window.innerHeight);

Это позволяет сцене автоматически масштабироваться при изменении размеров окна.

Масштабирование и координатные системы

Two.js использует координатную систему с началом в левом верхнем углу, где x увеличивается вправо, а y — вниз. Масштаб сцены можно регулировать с помощью свойств scale объектов Group и отдельных фигур:

const rect = two.makeRectangle(0, 0, 100, 50);
rect.scale = 2; // увеличивает размеры в 2 раза

Масштаб применяется к фигуре относительно её центра. Для более сложных объектов можно группировать фигуры:

const group = two.makeGroup(rect, circle);
group.scale = 1.5; // масштабирование всех фигур внутри группы

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

Настройка линий и контуров

Толщина и стиль линий задаются через свойства linewidth и stroke:

rect.linewidth = 5; // толщина линии 5 пикселей
rect.stroke = '#ff0000'; // цвет обводки

Дополнительно можно контролировать:

  • strokeOpacity — прозрачность линии (0–1).
  • cap — форма концов линий (butt, round, square).
  • join — способ соединения линий (miter, round, bevel).

Пример с эффектом скругления углов и прозрачностью:

rect.linewidth = 4;
rect.stroke = '#00ff00';
rect.strokeOpacity = 0.7;
rect.cap = 'round';
rect.join = 'round';

Заливка фигур

Фигуры можно закрашивать цветом или градиентом:

rect.fill = '#0000ff'; // сплошной цвет
rect.opacity = 0.5;    // прозрачность заливки

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

const gradient = new Two.LinearGradient(0, 0, 100, 0, [
  new Two.Stop(0, '#ff0000'),
  new Two.Stop(1, '#0000ff')
]);
rect.fill = gradient;
  • LinearGradient — линейный градиент.
  • RadialGradient — радиальный градиент.
  • Stop — контрольная точка цвета с позицией от 0 до 1.

Настройка толщины линий и масштабирование

Толщина линий (linewidth) воспринимается по-разному в зависимости от рендерера. В svg и canvas она масштабируется вместе с объектом при изменении scale, в webgl — часто остаётся постоянной. Для точного контроля рекомендуется:

  • Для масштабируемых фигур: изменять linewidth пропорционально scale.
  • Для фиксированных линий: оборачивать фигуры в группу с scale = 1 и управлять масштабом только позициями.

Работа с текстом

Объекты текста также подчиняются правилам масштаба и начертания:

const text = two.makeText('Hello Two.js', 100, 100, {
  size: 24,          // размер шрифта
  family: 'Arial',   // шрифт
  weight: 700,       // жирность
  style: 'italic'    // курсив
});
text.fill = '#333333';

Основные свойства текста:

  • size — размер шрифта в пикселях.
  • family — семейство шрифтов.
  • weight — толщина начертания (normal, bold, числовые значения 100–900).
  • style — стиль (normal, italic, oblique).
  • alignment — выравнивание (left, center, right).

Текстовые объекты реагируют на scale точно так же, как фигуры, поэтому изменение размера шрифта и масштабирование можно комбинировать для гибкой настройки визуала.

Комплексные трансформации

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

const circle = two.makeCircle(0, 0, 50);
circle.fill = '#ff6600';
circle.linewidth = 3;

const group = two.makeGroup(rect, circle);
group.translation.set(200, 150);
group.rotation = Math.PI / 6;
group.scale = 1.8;
  • translation — смещение объекта по координатам x и y.
  • rotation — угол вращения в радианах.
  • scale — коэффициент масштабирования.

Эти свойства позволяют создавать анимации с изменением размера, перемещением и вращением одновременно, сохраняя относительные пропорции объектов.

Анимация размеров и линий

Для динамических изменений размеров и линий Two.js использует метод bind с анимацией через two.update():

two.bind('update', function(frameCount) {
  rect.scale = 1 + 0.5 * Math.sin(frameCount * 0.05);
  rect.linewidth = 2 + Math.abs(Math.sin(frameCount * 0.05)) * 3;
}).play();
  • frameCount — номер текущего кадра.
  • scale и linewidth можно изменять в реальном времени для плавной анимации.

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

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

Оглавление