Параметры создания фигур

Создание фигур в Two.js строится вокруг набора параметров, которые определяют геометрию, позиционирование, внешний вид и поведение объектов. Любая фигура — это объект сцены, обладающий свойствами, доступными для изменения как при создании, так и в процессе работы.

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

Позиционирование: координаты x и y

Каждая фигура в Two.js имеет положение в двумерном пространстве, задаваемое координатами:

var circle = two.makeCircle(100, 150, 50);
  • 100 — координата по оси X
  • 150 — координата по оси Y

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

  • начало (0, 0) — левый верхний угол
  • ось X направлена вправо
  • ось Y направлена вниз

После создания позицию можно изменить:

circle.position.x = 200;
circle.position.y = 300;

Или сразу:

circle.position.set(200, 300);

Размеры фигур

Параметры размеров зависят от типа фигуры:

Круг (makeCircle)

var circle = two.makeCircle(x, y, radius);
  • radius — радиус круга

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

var rect = two.makeRectangle(x, y, width, height);
  • width — ширина
  • height — высота

Эллипс (makeEllipse)

var ellipse = two.makeEllipse(x, y, rx, ry);
  • rx — радиус по горизонтали
  • ry — радиус по вертикали

Линия (makeLine)

var line = two.makeLine(x1, y1, x2, y2);
  • начальная и конечная точки

Параметры вершин (для сложных фигур)

Для фигур, создаваемых вручную (например, через Two.Path), используются вершины:

var path = new Two.Path([
  new Two.Anchor(0, 0),
  new Two.Anchor(100, 0),
  new Two.Anchor(100, 100)
], true);

Параметры:

  • массив точек (Anchor)
  • замкнутость (true или false)

Каждая вершина может содержать:

  • координаты
  • управляющие точки (для кривых Безье)

Цвет заливки (fill)

Определяет внутренний цвет фигуры:

circle.fill = 'red';

Поддерживаются:

  • строковые значения ('blue', 'rgb(255,0,0)')
  • HEX ('#FF0000')
  • прозрачность (rgba)

Отключение заливки:

circle.fill = 'transparent';

Цвет и параметры обводки (stroke, linewidth)

Обводка задаётся отдельно:

circle.stroke = 'black';
circle.linewidth = 2;

Дополнительные параметры:

  • linewidth — толщина линии
  • opacity — прозрачность обводки

Отключение:

circle.noStroke();

Прозрачность (opacity)

Общий уровень прозрачности фигуры:

circle.opacity = 0.5;

Значения:

  • 0 — полностью прозрачный
  • 1 — полностью непрозрачный

Масштабирование (scale)

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

circle.scale = 2;

Или по осям:

circle.scale = new Two.Vector(2, 1);

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

  • влияет на всю фигуру, включая обводку
  • применяется относительно центра

Поворот (rotation)

Угол поворота задаётся в радианах:

circle.rotation = Math.PI / 4;

Эквиваленты:

  • Math.PI — 180°
  • Math.PI / 2 — 90°

Поворот происходит вокруг центра фигуры.

Смещение центра (translation и origin)

Two.js использует внутреннюю точку отсчёта:

shape.translation.set(x, y);

Также можно изменить точку вращения:

shape.origin.set(50, 50);

Это влияет на:

  • поворот
  • масштабирование

Видимость (visible)

Позволяет скрывать фигуру:

circle.visible = false;

Полезно для:

  • анимаций
  • условного отображения

Сглаживание углов (join, cap)

Для линий и контуров:

line.join = 'round';
line.cap = 'round';

Варианты:

  • miter — острые углы
  • round — скруглённые
  • bevel — срезанные

Параметры кривых (Bezier)

Для кривых используются управляющие точки:

var anchor = new Two.Anchor(x, y, lx, ly, rx, ry);

Где:

  • lx, ly — левая контрольная точка
  • rx, ry — правая контрольная точка

Это позволяет создавать:

  • плавные линии
  • сложные формы

Группировка параметров через объект

Фигуры можно объединять в группы:

var group = two.makeGroup(circle, rect);

Группа имеет те же параметры:

  • position
  • rotation
  • scale

Изменение параметров группы влияет на все вложенные элементы.

Динамическое изменение параметров

Two.js позволяет менять параметры в реальном времени:

two.bind('update', function() {
  circle.rotation += 0.01;
  circle.scale += 0.01;
});

После изменений необходимо обновление сцены:

two.update();

Параметры при создании vs после создания

Большинство параметров можно:

  • задать сразу при создании
  • изменить позже через свойства объекта

Пример комбинирования:

var rect = two.makeRectangle(100, 100, 50, 50);
rect.fill = 'blue';
rect.rotation = Math.PI / 6;
rect.scale = 1.5;

Влияние порядка параметров

При создании фигур порядок аргументов строго фиксирован. Ошибки приводят к некорректному отображению:

// корректно
two.makeRectangle(x, y, width, height);

// ошибка
two.makeRectangle(width, height, x, y);

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

Two.js поддерживает несколько типов рендеринга:

  • Canvas
  • SVG
  • WebGL

Параметры фигур остаются одинаковыми, но:

  • производительность может отличаться
  • некоторые стили отображаются по-разному

Итоговая структура параметров фигуры

Каждая фигура в Two.js включает:

Геометрия

  • координаты
  • размеры
  • вершины

Трансформации

  • position
  • scale
  • rotation
  • origin

Стили

  • fill
  • stroke
  • linewidth
  • opacity

Поведение

  • visible
  • принадлежность к группе

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

Оглавление