Ограничения при импорте/экспорте

Библиотека Two.js обеспечивает мощный и гибкий инструмент для работы с 2D-графикой в JavaScript, однако при импорте и экспорте данных существуют определённые ограничения, которые необходимо учитывать для корректной работы и совместимости.

Импорт SVG-файлов

Two.js поддерживает импорт объектов в формате SVG через метод Two.Commands.parse или через модуль Two.Shape. Основные ограничения:

Поддержка только базовых элементов: Two.js корректно обрабатывает <path>, <polygon>, <polyline>, <rect>, <circle> и <ellipse>. Элементы <text>, <pattern>, <mask> и <filter> не поддерживаются.
Отсутствие сложных трансформаций: Rotate, scale, skew и transform-матрицы работают частично. Комплексные трансформации SVG могут привести к некорректной визуализации.
Группировка (<g>): Группы импортируются, но вложенные трансформации и наследование стилей могут не воспроизводиться полностью.
Стили и атрибуты: Stroke, fill и opacity импортируются, но gradient и pattern часто игнорируются. CSS-стили, привязанные к SVG через class или style, не учитываются.

Пример импорта SVG:

const two = new Two({ width: 500, height: 500 }).appendTo(document.body);

fetch('example.svg')
  .then(response => response.text())
  .then(svgText => {
    const group = two.interpret(svgText);
    two.add(group);
    two.update();
  });

Экспорт в SVG

Two.js позволяет экспортировать сцену в SVG через метод two.renderer.domElement и two.update() с последующим извлечением XML. Ограничения при экспорте:

Ограниченный набор атрибутов: Линии, кривые, формы и базовые стили корректно экспортируются, а сложные эффекты (градиенты, маски, фильтры) — нет.
Трансформации объектов: Translate, scale и rotate учитываются, но сложные вложенные группы и комбинированные трансформации могут экспортироваться некорректно.
События и интерактивность: Экспортируемый SVG — это статическая графика. Обработчики событий, анимация и динамические изменения Two.js не сохраняются.

Пример экспорта SVG:

const svgElement = two.renderer.domElement;
const svgData = new XMLSerializer().serializeToString(svgElement);
console.log(svgData);

Импорт/экспорт через Canvas и WebGL

Two.js позволяет рендерить сцену на Canvas или WebGL, но перенос данных между форматами имеет свои ограничения:

Canvas: Экспорт изображения возможен через toDataURL(), однако сохраняется только растровое изображение, без структуры объектов Two.js.
WebGL: Динамическая анимация сохраняется только при использовании внутреннего рендеринга. Экспорт в SVG невозможен напрямую, так как WebGL хранит графику в виде шейдеров и буферов.
Потеря интерактивности: Любая попытка сохранить сцену как изображение или SVG лишает объекты привязанных событий и методов Two.js.

Ограничения по размерам и сложным объектам

Производительность при большом количестве объектов: Импорт больших SVG-файлов с тысячами элементов может привести к падению FPS или зависанию браузера.
Сложные кривые и градиенты: Bezier- и quadratic-кривые в SVG часто конвертируются в полигоны, что приводит к потере точности.
Текстовые элементы: SVG <text> и сложные шрифты не поддерживаются при импорте, что требует ручного преобразования в контуры.

Ограничения при экспорте анимации

Two.js не поддерживает экспорт анимаций в SVG или другие форматы. Все анимированные свойства должны быть преобразованы в кадры или записаны отдельно.
Для сохранения анимаций требуется использовать GIF, WebM или Canvas рендеринг с внешней библиотекой записи видео.