Якорные точки и их свойства

Якорные точки (Anchor Points) — ключевые элементы в Two.js, определяющие форму и геометрию линий и кривых. Каждая точка содержит координаты и дополнительные параметры, позволяющие управлять изгибами сегментов. В контексте векторной графики они играют ту же роль, что вершины в полигональных моделях, но с расширенными возможностями за счёт управляющих векторов.

В библиотеке Two.js якорные точки используются в объектах Two.Path, Two.Polygon, Two.Line и других примитивах, построенных на основе сегментов.

Структура якорной точки

Якорная точка представлена объектом Two.Anchor и включает следующие основные свойства:

  • x, y — координаты точки
  • controls — управляющие векторы (для кривых Безье)
  • command — тип сегмента (например, move, line, curve)
  • relative — относительные координаты (редко используется напрямую)

Пример создания:

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

Управляющие векторы (Bezier handles)

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

  • controls.left
  • controls.right

Они определяют форму кривой до и после точки.

anchor.controls.left.set(-20, 0);
anchor.controls.right.set(20, 0);

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

  • Векторы задаются относительно самой точки
  • Если оба вектора равны (0, 0), сегмент становится прямой линией
  • Несимметричные векторы создают асимметричные кривые

Типы команд (command)

Свойство command определяет, как интерпретируется точка в пути:

  • Two.Commands.move — перемещение без рисования
  • Two.Commands.line — прямая линия
  • Two.Commands.curve — кривая Безье
  • Two.Commands.close — замыкание пути

Пример:

anchor.command = Two.Commands.curve;

Работа с массивом якорных точек

Внутри Two.Path якорные точки хранятся в массиве vertices:

const path = new Two.Path([
  new Two.Anchor(0, 0),
  new Two.Anchor(100, 100),
  new Two.Anchor(200, 0)
]);

Доступ и изменение:

path.vertices[1].x = 150;
path.vertices[1].y = 50;

Кривые Безье в Two.js

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

Для двух точек:

  • Точка A имеет controls.right
  • Точка B имеет controls.left

Именно эти два вектора формируют изгиб между точками.

Симметричные и угловые точки

Симметричная точка

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

anchor.controls.left.set(-30, 0);
anchor.controls.right.set(30, 0);

Обеспечивает плавный переход.

Угловая (sharp) точка

Один или оба вектора равны нулю:

anchor.controls.left.set(0, 0);
anchor.controls.right.set(0, 0);

Создаёт резкий угол.

Динамическое изменение формы

Изменение якорных точек позволяет анимировать формы:

two.bind('upd ate', function() {
  path.vertices[0].x += Math.sin(Date.now() * 0.001);
});

Важно учитывать:

  • После изменения координат перерисовка происходит автоматически
  • При сложных изменениях полезно использовать флаг path._flagVertices = true

Замыкание пути

Свойство closed определяет, соединяется ли последняя точка с первой:

path.closed = true;

При этом:

  • Последний сегмент также использует управляющие векторы
  • Поведение кривой сохраняется

Интерполяция между точками

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

  • наличия управляющих векторов
  • типа command

Если у точки отсутствуют controls, сегмент становится линейным.

Добавление и удаление точек

Добавление:

path.vertices.push(new Two.Anchor(300, 200));

Удаление:

path.vertices.splice(1, 1);

После изменений желательно обновить флаги:

path._flagVertices = true;

Использование с готовыми примитивами

Многие примитивы автоматически создают якорные точки:

const circle = two.makeCircle(100, 100, 50);

Внутри:

  • окружность аппроксимируется кривыми Безье
  • каждая точка содержит настроенные controls

Доступ:

circle.vertices.forEach(v => console.log(v));

Преобразования якорных точек

Якорные точки наследуют поведение Two.Vector, поэтому доступны методы:

anchor.add(new Two.Vector(10, 0));
anchor.multiplyScalar(2);

Это упрощает геометрические преобразования.

Относительные координаты

Свойство relative определяет, интерпретируются ли координаты относительно предыдущей точки:

anchor.relative = true;

Используется редко, но важно при импорте SVG.

Импорт SVG и якорные точки

При загрузке SVG:

two.load('shape.svg', function(group) {
  two.add(group);
});
  • все пути преобразуются в массивы Anchor
  • команды и управляющие векторы сохраняются

Это делает якорные точки универсальным представлением любой векторной графики.

Оптимизация и производительность

При работе с большим количеством точек:

  • избегается частое создание новых объектов Anchor
  • предпочтительно изменять существующие
  • отключается автоматическое обновление (при необходимости)
path._automatic = false;

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

const points = [
  new Two.Anchor(50, 50),
  new Two.Anchor(150, 150),
  new Two.Anchor(250, 50)
];

points[1].controls.left.se t(-50, 0);
points[1].controls.right.set(50, 0);

const curve = new Two.Path(points, false);
two.add(curve);

Результат:

  • плавная кривая через три точки
  • форма контролируется только одной точкой

Взаимосвязь якорных точек и визуального результата

Изменение одной точки влияет на:

  • форму двух соседних сегментов
  • общую плавность линии
  • восприятие фигуры

Поэтому при проектировании сложных форм важно:

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

Распространённые ошибки

1. Отсутствие управляющих векторов → линия становится ломаной

2. Слишком длинные векторы → появляются «перелёты» и артефакты

3. Несогласованные направления → резкие изломы

4. Частое пересоздание точек → снижение производительности

Итоговое понимание

Якорная точка — это не просто координата, а полноценный инструмент управления геометрией:

  • задаёт положение
  • формирует кривизну
  • влияет на соседние сегменты
  • участвует в анимации

Глубокое понимание структуры Two.Anchor позволяет создавать сложные, плавные и оптимизированные векторные формы в Two.js.

Оглавление