Градиенты

В Paper.js градиенты применяются через объект Gradient, который описывает плавный переход цвета между несколькими точками. Для создания градиента необходимо задать массив цветовых остановок (stops), каждую из которых можно определить цветом и позицией на шкале от 0 до 1.

Пример создания линейного градиента:

var linearGradient = new Gradient([
    new GradientStop(new Color(1, 0, 0), 0), // красный в начале
    new GradientStop(new Color(0, 0, 1), 1)  // синий в конце
]);

Здесь GradientStop определяет конкретный цвет (Color) и его положение на градиентной линии (0 — начало, 1 — конец).

Применение градиентов к объектам

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

var rectangle = new Path.Rectangle(new Point(50, 50), new Size(200, 100));
rectangle.fillColor = new Color(linearGradient, new Point(50, 50), new Point(250, 150));
  • Начальная точка (from) задаёт начало градиента.
  • Конечная точка (to) определяет направление и протяжённость перехода.

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

Типы градиентов

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

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

var linearGradient = new Gradient({
    stops: ['red', 'yellow', 'green'],
    radial: false // false — линейный градиент
});
  • Параметр radial: false явно указывает, что градиент линейный.
  • Можно комбинировать произвольное количество цветов.

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

Радиальный градиент создаёт концентрический переход цветов, исходящий от центральной точки. Это особенно полезно для создания сферических объектов или подсветки.

var radialGradient = new Gradient({
    stops: ['white', 'blue', 'black'],
    radial: true
});

var circle = new Path.Circle(new Point(150, 150), 100);
circle.fillColor = new Color(radialGradient, new Point(150, 150), new Point(150, 250));
  • Центральная точка задаётся первым Point.
  • Конечная точка задаёт радиус градиента.

Настройка прозрачности и альфа-канала

Каждая цветовая остановка может иметь альфа-канал. Это позволяет создавать эффекты плавного исчезновения цвета.

var gradient = new Gradient([
    new GradientStop(new Color(1, 0, 0, 1), 0), // полностью непрозрачный
    new GradientStop(new Color(0, 0, 1, 0), 1)  // полностью прозрачный
]);

Альфа-канал задаётся последним аргументом в объекте Color. Это удобно для создания эффектов тумана или мягкого свечения.

Использование градиентов с кривыми и сложными фигурами

Градиенты автоматически растягиваются в пределах bounding box объекта, если явно не заданы from и to. Для сложных форм рекомендуется задавать координаты градиента вручную, чтобы контролировать направление и распределение цветов.

var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(200, 80));
path.add(new Point(150, 200));
path.closed = true;

path.fillColor = new Color(gradient, new Point(50, 50), new Point(150, 200));

Комбинация градиентов и прозрачности

Для достижения реалистичных визуальных эффектов можно комбинировать несколько слоёв с градиентами и разной прозрачностью:

var topLayer = new Path.Circle(new Point(200, 200), 100);
topLayer.fillColor = new Color(new Gradient(['red', 'yellow', 'red']), new Point(100, 100), new Point(300, 300));

var bottomLayer = new Path.Circle(new Point(200, 200), 150);
bottomLayer.fillColor = new Color(new Gradient([
    new GradientStop(new Color(0, 0, 1, 0.5), 0),
    new GradientStop(new Color(0, 0, 1, 0), 1)
]), new Point(50, 50), new Point(350, 350));

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

Применение градиентов к контуру

Хотя чаще градиенты используются для заливки, Paper.js поддерживает и градиенты для stroke:

var line = new Path.Line(new Point(50, 50), new Point(250, 150));
line.strokeColor = new Color(new Gradient(['red', 'blue']), new Point(50, 50), new Point(250, 150));
line.strokeWidth = 10;
  • Градиент будет распределён вдоль линии.
  • Для кривых можно задавать отдельные точки from и to для точного контроля.

Динамическое обновление градиентов

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

var gradientCircle = new Path.Circle(new Point(200, 200), 100);
gradientCircle.fillColor = new Color(new Gradient(['red', 'blue']), new Point(100, 100), new Point(300, 300));

function onFrame(event) {
    gradientCircle.fillColor.gradient.stops[1].color.red = Math.abs(Math.sin(event.time));
}
  • Это позволяет создавать анимированные плавные переходы цвета.
  • Подходит для визуализаций, интерактивных диаграмм и игр.

Оптимизация производительности

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

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

Оглавление