Создание путей из SVG данных

Для работы с SVG в Two.js необходимо создать экземпляр библиотеки и привязать его к контейнеру HTML. Two.js поддерживает рендеринг на svg, canvas и webgl, поэтому первым шагом является выбор подходящего рендерера и создание сцены:

const elem = document.getElementById('draw-area');
const two = new Two({
  width: 800,
  height: 600,
  type: Two.Types.svg
}).appendTo(elem);

Здесь type: Two.Types.svg указывает на использование SVG-рендерера, который напрямую поддерживает работу с путями SVG и их импортом.

Импорт SVG данных

Two.js позволяет создавать графику из существующих SVG-строк или файлов. Основной метод для этого — Two.Utils.parseSVG, который разбирает SVG и превращает его в объекты Two.js:

const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <path d="M10 10 H 90 V 90 H 10 Z" fill="none" stroke="black"/>
</svg>`;

const svgElement = new DOMParser().parseFromString(svgString, "image/svg+xml").documentElement;
const shapes = Two.Utils.parseSVG(svgElement);

parseSVG возвращает массив объектов Two.js (Two.Path, Two.Group), которые можно добавлять на сцену. Важно помнить, что parseSVG поддерживает только те элементы SVG, которые напрямую соответствуют возможностям Two.js: <path>, <polygon>, <polyline>, <circle>, <ellipse>, <rect>.

Работа с путями

После импорта пути становятся объектами Two.js и могут управляться программно. Основной класс для представления сложных контуров — Two.Path. Он содержит массив vertices, каждый из которых описывает точку с координатами x, y и, при необходимости, кривизной (bezier handles).

const path = shapes[0]; // Первый элемент, например, путь
path.fill = 'rgba(255,0,0,0.5)';
path.stroke = 'black';
path.linewidth = 2;

two.add(path);
two.update();

Ключевые моменты:

  • vertices — массив точек, определяющих форму.
  • closed — булевое свойство, указывающее, замкнут ли путь.
  • curved — булевое свойство для плавных кривых между вершинами.

Two.js автоматически интерпретирует команды SVG (M, L, C, Q) и превращает их в массив вершин с корректными кривизнами.

Преобразование и трансформации

Пути SVG в Two.js можно масштабировать, вращать и перемещать через свойства объекта:

path.translation.set(50, 50); // смещение
path.rotation = Math.PI / 4;  // поворот на 45°
path.scale = 1.5;             // увеличение

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

Анимация пути

Two.js поддерживает анимацию через методы Two.Tween или стандартные функции requestAnimationFrame. Для анимации вершин можно изменять их координаты:

two.bind('upd ate', function(frameCount) {
  path.vertices.forEach((v, i) => {
    v.x += Math.sin(frameCount * 0.05 + i) * 0.5;
    v.y += Math.cos(frameCount * 0.05 + i) * 0.5;
  });
}).play();

При этом рендеринг автоматически обновляет отображение, создавая плавную анимацию движения контура.

Стилизация и свойства SVG

Two.js сохраняет все визуальные свойства пути:

  • fill — цвет заливки.
  • stroke — цвет контура.
  • linewidth — толщина линии.
  • opacity — прозрачность.
  • cap и join — стиль окончания и соединения линий.

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

Группировка и сложные композиции

Для сложных SVG с несколькими элементами удобно использовать Two.Group. Он позволяет объединять несколько путей в одну логическую структуру и применять трансформации к всей группе:

const group = new Two.Group();
shapes.forEach(shape => group.add(shape));
group.translation.se t(100, 100);

two.add(group);
two.update();

Группы упрощают управление многоконтурными SVG и позволяют создавать иерархические анимации.

Импорт внешних SVG файлов

Для загрузки внешних SVG файлов обычно используют fetch:

fetch('icon.svg')
  .then(response => response.text())
  .then(svgText => {
    const svgElement = new DOMParser().parseFromString(svgText, "image/svg+xml").documentElement;
    const shapes = Two.Utils.parseSVG(svgElement);
    shapes.forEach(shape => two.add(shape));
    two.update();
  });

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

Преобразование в анимированные кривые

Для более сложных анимаций можно использовать Two.Path с включённой кривизной:

path.curved = true;
path.vertices.forEach(v => {
  v.x += Math.sin(v.y * 0.1) * 2;
});
two.update();

Это позволяет плавно интерполировать точки пути и создавать эффекты “живых” линий и morphing-анимации.

Оглавление