Экспорт с настройками

Paper.js предоставляет гибкие возможности для экспорта графических объектов и проектов в различные форматы. Основным способом является использование методов объектов Project и Item, которые позволяют получать данные в формате SVG, Canvas или изображений. Экспорт можно настроить так, чтобы сохранялись все параметры объектов, стили и трансформации.

Экспорт в SVG

SVG (Scalable Vector Graphics) является стандартным форматом для векторной графики. Paper.js обеспечивает прямой экспорт любого объекта в SVG с сохранением его стилей, трансформаций и иерархии групп.

Метод exportSVG:

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red',
    strokeColor: 'black',
    strokeWidth: 2
});

var svg = circle.exportSVG({ asString: true });
console.log(svg);

Параметры exportSVG:

  • asString – если true, возвращает строку SVG, если false, возвращает объект DOM.
  • precision – количество знаков после запятой для координат (по умолчанию 5), что позволяет уменьшить размер SVG без потери точности.
  • matchShapes – при значении true пытается сохранять примитивные формы (круги, прямоугольники) как <circle> и <rect>, а не как кривые <path>.

Пример с настройкой точности и сохранением форм:

var svg = circle.exportSVG({
    asString: true,
    precision: 2,
    matchShapes: true
});

Экспорт всего проекта

Экспорт всего проекта включает все слои и объекты. Для этого используется project.exportSVG():

var group = new Group([circle, new Path.Rectangle({
    point: [50, 50],
    size: [100, 100],
    fillColor: 'blue'
})]);

var projectSVG = project.exportSVG({ asString: true });

Настройка экспорта проекта позволяет сохранять структуру групп, слоев и их стили. Опция matchShapes особенно полезна для оптимизации SVG.

Экспорт в растровое изображение (Canvas)

Для получения PNG или JPEG Paper.js может отрисовать проект на HTML Canvas, а затем извлечь изображение с помощью toDataURL():

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 500;

var raster = project.activeLayer.rasterize();
var context = canvas.getContext('2d');
raster.draw(context);
var dataURL = canvas.toDataURL('image/png');

Особенности растрового экспорта:

  • Метод rasterize() создаёт растровое изображение из векторного объекта с указанным разрешением.
  • Можно задать resolution, чтобы получить изображение более высокого качества.
  • Поддерживаются прозрачные слои, если Canvas создаётся с alpha = true.

Настройка цвета и стиля при экспорте

Paper.js сохраняет все стили, но иногда требуется изменить их для экспорта. Можно использовать временные копии объектов и модифицировать fillColor, strokeColor или strokeWidth:

var tempCircle = circle.clone();
tempCircle.fillColor = 'green';
var svgString = tempCircle.exportSVG({ asString: true });
tempCircle.remove();

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

Оптимизация и управление размером SVG

  • Сокращение числа знаков точности уменьшает размер файла, например: precision: 1.
  • Удаление неиспользуемых слоёв и объектов перед экспортом снижает объём.
  • Конвертация примитивов в <path> через matchShapes: false позволяет получить единообразный формат для обработки в других инструментах.

Экспорт нескольких объектов с индивидуальными настройками

Paper.js позволяет экспортировать каждый объект отдельно с собственными параметрами:

var items = project.activeLayer.children;
items.forEach(function(item) {
    var svgItem = item.exportSVG({ asString: true, precision: 2 });
    console.log(svgItem);
});

Такой подход полезен для пакетного создания SVG-иконок, слоёв для веб-анимаций или генерации ассетов.

Экспорт с использованием rasterize для сложных сцен

Для сложных композиций с прозрачными объектами или эффектами:

var raster = project.activeLayer.rasterize({ resolution: 2 });
var dataURL = raster.toDataURL();
  • resolution позволяет управлять DPI изображения.
  • Поддерживаются тени, градиенты и прозрачность.
  • После получения dataURL можно сохранить PNG через <a> с download или отправить на сервер.

Применение экспорта в рабочих процессах

  • Веб-разработка: SVG можно встроить в HTML или использовать как отдельные файлы для иконок и графики.
  • Дизайн и печать: PNG или JPEG экспорт пригоден для растровых публикаций.
  • Анимации и игры: экспорт отдельных объектов с разными стилями облегчает создание ассетов для Canvas или WebGL.

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

Оглавление