Визуализация якорных точек

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

const elem = document.getElementById('draw-shapes');

const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg // Можно использовать 'canvas' или 'webgl'
}).appendTo(elem);

Параметр type определяет способ рендеринга: SVG подходит для векторной графики с четкими линиями, canvas — для растровой графики с динамическими эффектами, а WebGL — для ускоренной аппаратной визуализации.

Важно: при использовании WebGL необходимо корректно учитывать размеры сцены, так как масштабирование влияет на координаты всех объектов.

Создание якорных точек

Якорные точки (anchor points) — это контрольные точки, определяющие форму кривых или позицию объектов. В Two.js они используются для полилиний (Two.Path), кривых Безье (Two.Anchor) и сложных фигур.

const points = [
  new Two.Anchor(100, 100, Two.Commands.move),
  new Two.Anchor(200, 50, Two.Commands.curve),
  new Two.Anchor(300, 150, Two.Commands.curve),
  new Two.Anchor(400, 100, Two.Commands.line)
];

const path = new Two.Path(points, true, false);
two.add(path);
  • Two.Anchor(x, y, command) создаёт якорь с координатами (x, y) и типом команды (move, line, curve или arc).
  • Параметр closed у Two.Path определяет, будет ли фигура замкнутой.
  • Параметр curved включает автоматическую интерполяцию кривых между точками.

Визуализация якорных точек

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

points.forEach(anchor => {
  const dot = two.makeCircle(anchor.x, anchor.y, 5);
  dot.fill = '#FF0000';
  dot.stroke = '#000000';
  dot.linewidth = 1;
});
  • two.makeCircle(x, y, radius) создаёт круг с центром в (x, y) и заданным радиусом.
  • Цвет и ширина линии настраиваются через свойства fill, stroke и linewidth.
  • Визуализация якорей позволяет легко отслеживать поведение кривых при изменении координат точек.

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

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

two.bind('upd ate', function() {
  points.forEach(anchor => {
    anchor.x += Math.sin(Date.now() * 0.001);
    anchor.y += Math.cos(Date.now() * 0.001);
  });
}).play();
  • Метод bind('update', callback) подключает функцию, вызываемую каждый кадр.
  • Изменение координат якорей в реальном времени отражается на связанных кривых.
  • Использование Math.sin и Math.cos позволяет создать плавную анимацию точек.

Настройка стилей кривых и якорей

Для улучшения визуального восприятия кривых важно настроить стили:

path.stroke = '#0000FF';
path.linewidth = 3;
path.noFill();
  • stroke задаёт цвет линии кривой.
  • linewidth определяет толщину линии.
  • noFill() отключает заливку фигуры, оставляя только контур.

Якорные точки можно дополнительно выделять при наведении или изменении позиции:

dot._renderer.elem.addEventListener('mouseenter', () => dot.fill = '#00FF00');
dot._renderer.elem.addEventListener('mouseleave', () => dot.fill = '#FF0000');
  • _renderer.elem предоставляет доступ к DOM-элементу для привязки событий.
  • Смена цвета при взаимодействии помогает визуально идентифицировать активные точки.

Сложные формы с несколькими якорями

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

const complexPoints = [
  new Two.Anchor(50, 300, Two.Commands.move),
  new Two.Anchor(150, 200, Two.Commands.curve),
  new Two.Anchor(250, 350, Two.Commands.curve),
  new Two.Anchor(350, 300, Two.Commands.curve),
  new Two.Anchor(450, 400, Two.Commands.line)
];

const complexPath = new Two.Path(complexPoints, false, true);
two.add(complexPath);
  • Замыкание (closed) и кривизна (curved) позволяют создавать как простые линии, так и плавные сложные фигуры.
  • Каждая точка может использовать разный тип команды, что даёт гибкость в построении кривых.

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

Группы (Two.Group) позволяют объединять якорные точки и связанные с ними элементы для удобного управления:

const group = two.makeGroup();
points.forEach(anchor => {
  const dot = two.makeCircle(anchor.x, anchor.y, 5);
  group.add(dot);
});
group.translation.se t(50, 50);
  • Two.Group объединяет несколько объектов в один контейнер.
  • Свойство translation позволяет смещать все объекты группы одновременно.
  • Можно применять масштабирование, вращение и другие трансформации ко всей группе.

Обновление и перерисовка сцены

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

two.update();
  • Этот вызов гарантирует, что все изменения координат и стилей будут отображены на экране.
  • Для анимации лучше использовать встроенный цикл bind('update') вместо ручного вызова update().

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

Оглавление