Two.Anchor и якорные точки

Two.Anchor в библиотеке Two.js представляет собой фундаментальный элемент для построения сложных кривых и форм. Он описывает точку с координатами и дополнительными управляющими параметрами, которые определяют форму кривой при её соединении с другими якорями. В Two.js каждый Path, Polygon или Curve состоит из набора таких якорей, что позволяет создавать как простые фигуры, так и сложные кривые Безье.

Свойства Two.Anchor:

  • x и y — координаты якоря на холсте.

  • controls — объект, содержащий управляющие точки кривой:

    • left — управляющая точка с левой стороны.
    • right — управляющая точка с правой стороны.

  • command — тип команды для отрисовки кривой (например, 'M' для Move, 'L' для линии, 'C' для кривой Безье).

Пример создания простого якоря:

let anchor = new Two.Anchor(100, 150, Two.Anchor.NONE);

Здесь Two.Anchor.NONE указывает, что у точки отсутствуют управляющие кривые, что делает её обычной вершиной линии.

Управляющие точки кривой

Каждый якорь может иметь управляющие точки, которые влияют на плавность перехода между соседними якорями. Управляющие точки задаются через объект controls:

let anchor = new Two.Anchor(200, 200, Two.Commands.curve);
anchor.controls.left.set(180, 180);
anchor.controls.right.set(220, 220);
  • controls.left смещает точку входа кривой к текущему якорю.
  • controls.right смещает точку выхода кривой от текущего якоря.

Это позволяет создавать кривые Безье любого порядка и направления.

Команды для якорей

Two.Anchor поддерживает следующие команды:

  • Two.Commands.move ('M') — перемещение пера в точку без рисования.
  • Two.Commands.line ('L') — отрисовка прямой линии до якоря.
  • Two.Commands.curve ('C') — построение кривой Безье через управляющие точки.
  • Two.Commands.close ('Z') — закрытие контура, соединяя последний якорь с первым.

Команда определяется при создании якоря или изменяется динамически:

anchor.command = Two.Commands.curve;

Создание сложных форм

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

let path = two.makePath(
  new Two.Anchor(50, 50, Two.Commands.move),
  new Two.Anchor(150, 50, Two.Commands.curve),
  new Two.Anchor(150, 150, Two.Commands.curve),
  new Two.Anchor(50, 150, Two.Commands.curve),
  true // замкнутый контур
);
  • Параметр true в makePath указывает, что фигура замкнута.
  • Каждая кривая строится через управляющие точки, автоматически интерполируя переходы между якорями.

Манипуляция якорями после создания

Якорь можно перемещать и изменять управляющие точки после создания:

path.vertices[1].x += 20;
path.vertices[1].controls.right.set(170, 70);
  • Изменение координат якоря влияет на весь сегмент кривой.
  • Модификация управляющих точек позволяет создавать плавные анимации и деформации фигур.

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

Two.Anchor поддерживает динамическую анимацию:

two.bind('upd ate', function(frameCount) {
  anchor.x = 200 + Math.sin(frameCount * 0.05) * 50;
  anchor.controls.right.y = 200 + Math.cos(frameCount * 0.05) * 30;
});
  • Привязка к событию update позволяет изменять координаты якоря в реальном времени.
  • Управляющие точки могут изменяться независимо, создавая эффект “живой” кривой.

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

  1. Использовать управляющие точки только при необходимости — лишние контрольные точки усложняют отрисовку и анимацию.
  2. Закрытые фигуры всегда требуют согласованных управляющих точек на начальном и последнем якорях.
  3. Комбинировать типы команд — move, line, curve — для сложных фигур с прямыми и кривыми сегментами.
  4. Анимация через привязку к update — лучший способ создавать интерактивные формы и эффекты в реальном времени.

Взаимодействие с другими объектами Two.js

Якорь тесно связан с Path и Shape:

  • Path.vertices хранит массив всех якорей.
  • Изменение якоря автоматически обновляет форму.
  • Можно добавлять новые якоря в любой момент через path.vertices.push(newAnchor).

Пример добавления якоря в существующую кривую:

let newAnchor = new Two.Anchor(200, 200, Two.Commands.curve);
newAnchor.controls.left.se t(180, 180);
newAnchor.controls.right.set(220, 220);
path.vertices.push(newAnchor);

Это позволяет создавать интерактивные редакторы фигур, динамические анимации и сложные кривые Безье.

Хотите, я подготовлю следующий раздел с реальными примерами создания анимированных фигур с использованием Two.Anchor и кривых Безье? Это будет продолжение прямо с кодом и визуальными объяснениями.

Оглавление