Операции с цветом

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

Создание объектов Color

Цвет можно задавать несколькими способами:

  1. С использованием именованных цветов
var circle = new Path.Circle(new Point(50, 50), 40);
circle.fillColor = 'red';

Paper.js распознает стандартные CSS-имена цветов.

  1. Через RGB
var rectangle = new Path.Rectangle(new Point(10, 10), new Size(80, 50));
rectangle.fillColor = new Color(0.2, 0.5, 0.8); // значения от 0 до 1

Здесь параметры (r, g, b) задают интенсивность красного, зелёного и синего каналов.

  1. Через RGBA
var path = new Path.Circle(new Point(100, 100), 50);
path.fillColor = new Color(1, 0, 0, 0.5); // красный с прозрачностью 50%

Последний параметр — это альфа-канал, который определяет прозрачность элемента.

  1. Использование HSB
var color = new Color();
color.hue = 180;      // оттенок (0–360)
color.saturation = 0.5; 
color.brightness = 0.7;

HSB-подход удобен для генерации цветовых переходов и динамического изменения цвета по циклам.

Работа с прозрачностью

Прозрачность задаётся через свойство alpha объекта Color или через четвёртый параметр при создании цвета:

var semiTransparent = new Color(0.1, 0.2, 0.3, 0.4);
console.log(semiTransparent.alpha); // 0.4

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

Градиенты

Paper.js поддерживает два типа градиентов: LinearGradient (линейный) и RadialGradient (радиальный).

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

var gradient = new Gradient(['red', 'yellow', 'green']);
var linear = new Color(gradient, new Point(0, 0), new Point(100, 0));
rectangle.fillColor = linear;
  • Параметр Gradient принимает массив цветов или массив объектов {color: Color, offset: number}.
  • offset определяет позицию цвета в градиенте от 0 до 1.

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

var radialGradient = new Gradient([
    { color: 'white', offset: 0 },
    { color: 'blue', offset: 1 }
]);
var radial = new Color(radialGradient, new Point(75, 75), new Point(75, 75));
circle.fillColor = radial;

Центр градиента задаётся первой точкой, вторая — радиус (или точка окончания градиента).

Преобразование цветов

Объект Color предоставляет методы для динамического изменения оттенка, насыщенности и яркости:

  • lighten и darken
var color = new Color('orange');
color.lighten(0.2); // делает цвет светлее на 20%
color.darken(0.1);  // делает цвет темнее на 10%
  • saturate и desaturate
color.saturate(0.3);   // увеличивает насыщенность на 30%
color.desaturate(0.5); // уменьшает насыщенность на 50%
  • invert
var inverted = color.inverted(); // возвращает противоположный цвет

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

Манипуляции с цветом при анимации

Для плавных переходов между цветами используется метод tweening:

var path = new Path.Circle(new Point(150, 150), 40);
path.fillColor = 'red';

var start = new Color('red');
var end = new Color('blue');

var step = 0;
view.onFr ame = function(event) {
    step += 0.01;
    path.fillColor = start.mix(end, step); // смешивание цветов
    if(step >= 1) step = 0;
};

Метод mix позволяет создавать плавные градации между двумя цветами, задавая коэффициент смешивания от 0 до 1.

Цветовые массивы и динамическое присвоение

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

var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'];
for (var i = 0; i < 4; i++) {
    var rect = new Path.Rectangle(new Point(i * 50, 0), new Size(50, 50));
    rect.fillColor = colors[i];
}

Можно также динамически создавать градиенты на основе этих массивов.

Итог

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

Оглавление