Сохранение стилей

В Paper.js объектам графики можно присваивать цветовые свойства, которые влияют на внешний вид фигуры. Основные параметры: fillColor и strokeColor.

let circle = new Path.Circle(new Point(150, 150), 50);
circle.fillColor = 'red';       // заливка красным цветом
circle.strokeColor = 'black';   // контур черного цвета
circle.strokeWidth = 5;         // толщина контура

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

  • Цвет можно задавать в виде строки ('red', '#ff0000'), объекта Color (new Color(1, 0, 0)), или градиента.
  • Stroke и Fill являются независимыми свойствами, что позволяет использовать разные комбинации для одного объекта.
  • Можно использовать полупрозрачность через fillColor.alpha или strokeColor.alpha:
circle.fillColor.alpha = 0.5; // полупрозрачная заливка

Стили контуров

Для детальной настройки линий применяются следующие свойства:

  • strokeWidth – толщина линии.
  • strokeCap – форма окончания линии ('round', 'square', 'butt').
  • strokeJoin – соединение сегментов линии ('round', 'bevel', 'miter').
  • dashArray – массив для создания пунктирных линий:
let line = new Path.Line([50, 50], [250, 50]);
line.strokeColor = 'blue';
line.strokeWidth = 4;
line.dashArray = [10, 5]; // 10px линия, 5px пропуск

Градиенты и радужные заливки

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

Линейный градиент:

let rectangle = new Path.Rectangle([50, 100], [200, 100]);
rectangle.fillColor = {
    gradient: {
        stops: ['red', 'yellow', 'green'],
        radial: false
    },
    origin: [50, 100],
    destination: [250, 200]
};

Радиальный градиент:

rectangle.fillColor = {
    gradient: {
        stops: ['white', 'blue'],
        radial: true
    },
    origin: [150, 150],
    destination: [150, 200]
};

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

  • stops определяет цвета перехода.
  • origin и destination задают направление градиента.
  • При радиальном градиенте origin – центр, а destination – радиус.

Применение стилей к группе объектов

Paper.js поддерживает наследование стиля при группировке объектов с помощью Group.

let circle1 = new Path.Circle(new Point(100, 100), 30);
let circle2 = new Path.Circle(new Point(200, 100), 30);

let group = new Group([circle1, circle2]);
group.fillColor = 'orange'; // применяется ко всем элементам группы

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

  • Установка стиля на уровне группы не перезаписывает индивидуальные свойства, если они явно заданы для объекта.
  • Можно использовать group.children для перебора всех объектов и изменения их стилей программно:
group.children.forEach(item => item.strokeColor = 'black');

Копирование и сохранение стилей

Для сохранения стиля объекта используется метод item.style. Это объект, содержащий все параметры визуального оформления:

let style = circle.style.clone(); // сохраняем стиль
let circle2 = circle.clone();
circle2.position.x += 100;
circle2.style = style;             // применяем сохраненный стиль

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

  • style.clone() создаёт независимую копию, что позволяет модифицировать новый объект, не влияя на исходный.
  • Свойства стиля включают: fillColor, strokeColor, strokeWidth, strokeCap, strokeJoin, dashArray, shadowColor, shadowBlur.
  • Это особенно полезно для повторного применения сложных визуальных эффектов или при создании библиотек фигур с единым стилем.

Стилизация текста

Для объектов PointText также применяются стили, которые хранятся в item.style.

let text = new PointText(new Point(150, 150));
text.content = 'Paper.js';
text.fillColor = 'purple';
text.fontSize = 24;
text.fontFamily = 'Arial';
text.fontWeight = 'bold';

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

  • fillColor – основной цвет текста.
  • fontSize, fontFamily, fontWeight – управляют шрифтом и толщиной.
  • Можно сохранять стиль текста точно так же через text.style.clone().

Сохранение комплексных стилей

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

let styleSet = {
    fillColor: 'skyblue',
    strokeColor: 'navy',
    strokeWidth: 3,
    shadowColor: 'gray',
    shadowBlur: 10
};

let rect = new Path.Rectangle([50, 50], [100, 50]);
Object.assign(rect.style, styleSet);

let ellipse = new Path.Ellipse({
    point: [200, 50],
    size: [100, 50]
});
Object.assign(ellipse.style, styleSet);

Преимущества подхода:

  • Централизованное управление стилями.
  • Возможность легко менять визуальное оформление целого набора объектов.
  • Ускоряет работу с повторяющимися элементами интерфейса или графики.

Итоговые возможности стилей

Система стилей Paper.js обеспечивает:

  • Полное управление заливкой и контурами.
  • Гибкость с градиентами и прозрачностью.
  • Наследование и копирование стилей для группы объектов.
  • Централизованное хранение и повторное использование сложных комбинаций стилей.
  • Поддержку текстовых объектов с отдельными шрифтовыми параметрами.

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

Оглавление