Логирование структуры объектов

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

Основные методы для логирования

  1. console.log() и JSON.stringify()

Простейший способ изучить объект — вывести его напрямую в консоль:

console.log(path);

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

function serializeItem(item) {
    const result = {};
    for (let key in item) {
        if (item.hasOwnProperty(key)) {
            let value = item[key];
            if (typeof value !== 'object' || value === null) {
                result[key] = value;
            } else if (value instanceof paper.Point) {
                result[key] = { x: value.x, y: value.y };
            } else {
                result[key] = value.constructor.name;
            }
        }
    }
    return result;
}

console.log(JSON.stringify(serializeItem(path), null, 2));

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

Просмотр иерархии объектов

Paper.js организует все элементы сцены в виде древовидной структуры. Каждый объект Item может содержать дочерние объекты в массиве children. Для логирования полной иерархии удобно использовать рекурсивную функцию:

function logHierarchy(item, level = 0) {
    const indent = '  '.repeat(level);
    console.log(`${indent}${item.constructor.name}: ${item.name || '(без имени)'}`);
    if (item.children && item.children.length) {
        item.children.forEach(child => logHierarchy(child, level + 1));
    }
}

logHierarchy(paper.project.activeLayer);

Результат позволяет визуально понять вложенность объектов и их типы, что особенно полезно при сложных сценах с группами и слоями.

Логирование свойств и трансформаций

Каждый объект Item обладает набором стандартных свойств, влияющих на его отображение:

  • position — координаты центра объекта.
  • rotation — угол поворота.
  • scaling — масштабирование по осям.
  • visible — видимость.
  • opacity — прозрачность.
  • bounds — ограничивающий прямоугольник.
  • strokeColor, fillColor, strokeWidth — стили отображения.

Для удобного логирования свойств можно создать универсальную функцию:

function logProperties(item) {
    console.log(`${item.constructor.name} Properties:`);
    console.log(`  Name: ${item.name || '(без имени)'}`);
    console.log(`  Position: x=${item.position.x}, y=${item.position.y}`);
    console.log(`  Rotation: ${item.rotation}`);
    console.log(`  Scaling: x=${item.scaling.x}, y=${item.scaling.y}`);
    console.log(`  Visible: ${item.visible}`);
    console.log(`  Opacity: ${item.opacity}`);
    console.log(`  Bounds: ${JSON.stringify(item.bounds)}`);
    if (item.strokeColor) console.log(`  Stroke Color: ${item.strokeColor}`);
    if (item.fillColor) console.log(`  Fill Color: ${item.fillColor}`);
}

Вызов logProperties(path) позволяет быстро получить все ключевые параметры объекта.

Логирование геометрических данных

Для объектов типа Path, CompoundPath или Shape важна структура кривых и сегментов. Paper.js предоставляет удобный доступ к этим данным через свойства segments, curves и методы getSegments().

Пример вывода сегментов пути:

path.segments.forEach((segment, index) => {
    console.log(`Segment ${index}:`);
    console.log(`  Point: x=${segment.point.x}, y=${segment.point.y}`);
    if (segment.handleIn) console.log(`  Handle In: x=${segment.handleIn.x}, y=${segment.handleIn.y}`);
    if (segment.handleOut) console.log(`  Handle Out: x=${segment.handleOut.x}, y=${segment.handleOut.y}`);
});

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

Использование exportJSON()

Paper.js предоставляет метод exportJSON(), который сериализует объект или слой в строку JSON с полной структурой и стилями:

console.log(paper.project.activeLayer.exportJSON({ asString: true, precision: 2 }));

Параметры asString и precision позволяют контролировать формат вывода. Этот метод особенно полезен для сохранения состояния сцены и последующего анализа.

Автоматическое логирование изменений

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

path.onFr ame = function(event) {
    console.log(`Frame at time ${event.time}`);
    logProperties(this);
};

Каждый кадр будет выводить текущее состояние объекта, включая позицию, вращение и масштаб.

Практические рекомендации

  • Для больших сцен лучше логировать только ключевые свойства, чтобы консоль оставалась читаемой.
  • Использование рекурсивных функций для просмотра иерархии объектов позволяет понять сложные структуры слоев и групп.
  • Метод exportJSON() полезен не только для логирования, но и для сохранения и восстановления проектов.
  • Геометрические данные сегментов и кривых полезны при анимации или генерации динамических форм.

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

Оглавление