Группы и слои из SVG

В Paper.js группы (Group) и слои (Layer) являются ключевыми структурами для организации объектов на холсте. Они позволяют управлять набором элементов одновременно, задавать трансформации, стили и порядок отображения. При работе с SVG важно понимать, как Paper.js импортирует и интерпретирует группы <g> и слои <svg>.

Импорт SVG в Paper.js

Для загрузки SVG используется метод project.importSVG(). Он может принимать как строку с SVG-кодом, так и объект SVGElement:

paper.project.importSVG(svgString, {
    onLoad: function(item) {
        // item — это корневая группа или элемент
    },
    expandShapes: true
});
  • onLoad — функция обратного вызова после завершения импорта.
  • expandShapes — при true все <path> и <polygon> будут преобразованы в объекты Paper.js (Path), а не оставлены в виде Shape.

После импорта Paper.js создает иерархию объектов, соответствующую структуре SVG. Основной контейнер часто представляет собой объект Group.

Работа с Group

Group объединяет несколько элементов, позволяя применять трансформации и стили ко всей группе:

let group = new Group();
let circle = new Path.Circle({
    center: [50, 50],
    radius: 25,
    fillColor: 'red'
});
let rectangle = new Path.Rectangle({
    point: [30, 30],
    size: [40, 40],
    fillColor: 'blue'
});

group.addChild(circle);
group.addChild(rectangle);

group.position = new Point(200, 200);
group.rotate(45);

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

  • Трансформации (position, rotation, scaling) применяются ко всем дочерним объектам.
  • Стили (fillColor, strokeColor) можно задавать как для отдельного объекта, так и для всей группы.
  • Можно создавать вложенные группы, что особенно полезно при работе с SVG, содержащими <g> внутри <g>.

Работа с Layer

Layer — это особый тип группы, который влияет на порядок отрисовки и видимость объектов:

let layer1 = new Layer();
let path1 = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'green'
});

let layer2 = new Layer();
let path2 = new Path.Circle({
    center: [150, 150],
    radius: 50,
    fillColor: 'orange'
});

// layer2 выше layer1, поэтому path2 рисуется поверх path1

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

  • Порядок слоев определяет порядок визуализации. Верхний слой перекрывает нижние.
  • Свойство activeLayer позволяет добавлять новые объекты в конкретный слой.
  • Слои можно скрывать (visible = false) или изменять прозрачность (opacity).

Преобразование SVG-групп в Paper.js

SVG <g> импортируются как объекты Group. Их структура и вложенность сохраняются:

<svg>
    <g id="group1" transform="translate(50,50)">
        <circle cx="0" cy="0" r="25" fill="red"/>
        <rect x="-20" y="-20" width="40" height="40" fill="blue"/>
    </g>
</svg>

Импорт в Paper.js:

paper.project.importSVG(svgElement, function(item) {
    console.log(item instanceof Group); // true
    console.log(item.children.length);  // 2
});

Особенности импорта:

  • transform из SVG автоматически применяется к объекту Group.
  • Если expandShapes = true, все фигуры внутри <g> становятся объектами Paper.js (Path.Circle, Path.Rectangle).
  • Можно динамически обращаться к дочерним элементам через group.children[i].

Управление трансформациями групп и слоев

Применение трансформаций к группе:

group.translate(50, 50);
group.rotate(30, group.bounds.center);
group.scale(1.5);

Применение к слою:

layer1.opacity = 0.5;
layer2.visible = false;
layer2.sendToBack(); // Перемещает слой вниз

Разница:

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

Пример: SVG с несколькими слоями

SVG с двумя слоями:

<svg>
  <g id="layer1">
    <circle cx="50" cy="50" r="25" fill="red"/>
  </g>
  <g id="layer2">
    <rect x="40" y="40" width="50" height="50" fill="blue"/>
  </g>
</svg>

Импорт в Paper.js с разделением на слои:

paper.project.importSVG(svgElement, {expandShapes: true}, function(item) {
    let layer1 = new Layer();
    let layer2 = new Layer();

    item.children[0].addTo(layer1); // Красный круг
    item.children[1].addTo(layer2); // Синий квадрат
});

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

Итоговая структура

При работе с SVG в Paper.js:

  • Group соответствует <g> в SVG. Используется для объединения объектов и управления ими как единым целым.
  • Layer управляет порядком отрисовки и глобальными свойствами. Можно использовать для организации сложных сцен.
  • Свойство children позволяет обходить вложенные элементы, применять стили, анимации и трансформации.
  • Метод importSVG сохраняет иерархию, применяет трансформации и позволяет выбирать способ конвертации фигур.

Эта комбинация групп и слоев обеспечивает гибкое управление импортированными SVG, облегчая построение сложных интерактивных сцен на Paper.js.

Оглавление