ExportJSON и сохранение в JSON

Paper.js предоставляет мощные инструменты для работы с графическими объектами и их сериализацией. Одним из ключевых методов является exportJSON(), позволяющий преобразовать объекты Paper.js в формат JSON для последующего сохранения, передачи или восстановления состояния сцены.

Основные возможности exportJSON()

Метод exportJSON() доступен у объектов типа Project и позволяет сериализовать всю сцену или отдельные элементы. Формат JSON сохраняет структуру объектов, их свойства и вложенные элементы, обеспечивая точное восстановление при импорте через importJSON().

// Сериализация всей сцены
var projectJSON = project.exportJSON();
console.log(projectJSON);

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

  • Сериализуются все объекты в project.activeLayer, включая слои, группы, кривые, фигуры и текст.

  • Сохраняются основные свойства объектов: позиция, размер, цвет, трансформации.

  • Метод может принимать аргумент с настройками сериализации:

    • asString — если true, возвращает JSON как строку, иначе как объект.
    • precision — количество знаков после запятой для числовых значений.

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

var jsonString = project.exportJSON({ asString: true, precision: 5 });

Экспорт отдельных объектов

Метод exportJSON() можно применять не только к проекту, но и к отдельным объектам, например к фигурам или группам. Это полезно, когда необходимо сохранить только часть сцены.

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

var circleJSON = circle.exportJSON({ asString: true });
console.log(circleJSON);

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

  • JSON будет содержать все свойства объекта, включая его стиль (fillColor, strokeColor, strokeWidth).
  • Вложенные объекты (например, элементы внутри группы) сериализуются рекурсивно.

Сохранение JSON в файл

Для сохранения JSON в браузере можно использовать объект Blob и создать ссылку для скачивания:

function saveJSON(jsonData, filename) {
    var blob = new Blob([jsonData], { type: 'application/json' });
    var url = URL.createObjectURL(blob);
    var link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
}

// Сохранение сцены
saveJSON(project.exportJSON({ asString: true }), 'scene.json');

Пояснения:

  • Blob создаёт объект, содержащий данные JSON в нужном MIME-типе.
  • URL.createObjectURL генерирует временную ссылку для скачивания.
  • link.click() инициирует скачивание, а URL.revokeObjectURL очищает память.

Восстановление объектов из JSON

Для восстановления состояния сцены используется метод importJSON(). Он принимает либо строку JSON, либо объект, возвращённый exportJSON() с asString: false.

var savedJSON = project.exportJSON({ asString: true });
var newProject = new Project();
newProject.importJSON(savedJSON);

Важные моменты:

  • Импорт восстанавливает все объекты с их свойствами и вложенной структурой.
  • Если JSON содержит элементы, которых нет в текущем проекте, они будут созданы заново.
  • Важно контролировать, что объекты добавляются в нужный слой.

Настройка точности и формата

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

var jsonHighPrecision = project.exportJSON({ asString: true, precision: 8 });
var jsonLowPrecision = project.exportJSON({ asString: true, precision: 2 });

Рекомендации:

  • Для визуальных приложений достаточно 2–4 знаков после запятой.
  • Для научных визуализаций или анимаций, где важна точность, можно использовать 6–8 знаков.

Сериализация стилей и пользовательских свойств

exportJSON() автоматически сохраняет стандартные свойства объектов, но можно также добавлять свои данные через data:

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

rectangle.data.customInfo = {
    author: 'Designer',
    layer: 'Background'
};

var rectJSON = rectangle.exportJSON({ asString: true });

При импорте importJSON() сохранит эти пользовательские данные:

var importedRect = project.importJSON(rectJSON);
console.log(importedRect.data.customInfo.author); // "Designer"

Преимущества:

  • Возможность хранения метаданных вместе с графикой.
  • Поддержка интеграции с другими системами, которые обрабатывают JSON.

Сценарии применения

  • Сохранение сцены между сессиями — позволяет пользователю вернуться к редактированию.
  • Передача данных на сервер — JSON можно отправлять на backend для хранения или совместной работы.
  • Динамическая генерация контента — объекты создаются программно, экспортируются и загружаются на другие страницы или проекты.
  • Встраивание в приложения с Undo/Redo — каждая операция может быть сохранена как JSON для отката изменений.

Резюме ключевых функций

Функция / Метод Назначение
exportJSON() Сериализация проекта или объекта в JSON
importJSON() Восстановление объектов из JSON
Blob + URL.createObjectURL Сохранение JSON в файл для скачивания
data Хранение пользовательских свойств для объектов
precision Управление точностью числовых значений при экспорте
asString Определяет формат вывода: строка или объект JSON

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

Оглавление