Цвета в Paper.js

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

Создание цвета

Цвета могут задаваться следующими способами:

  1. По имени
var circle = new Path.Circle(new Point(80, 50), 30);
circle.fillColor = 'red'; // Строковое имя цвета

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

  1. С помощью RGB
var rect = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
rect.fillColor = new Color(1, 0.5, 0); // r, g, b от 0 до 1

Каждый компонент r, g, b задаётся числом от 0 до 1.

  1. С помощью градации серого
var path = new Path.Circle(new Point(150, 150), 40);
path.fillColor = new Color(0.7); // оттенок серого

Один аргумент задаёт уровень серого: 0 — чёрный, 1 — белый.

  1. С помощью RGB с прозрачностью (Alpha)
var star = new Path.Star(new Point(200, 200), 5, 30, 70);
star.fillColor = new Color(0, 1, 0, 0.5); // прозрачность 0.5

Последний параметр alpha контролирует прозрачность цвета, 0 — полностью прозрачный, 1 — полностью непрозрачный.

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

Заливка (fillColor) и обводка (strokeColor):

var path = new Path.Rectangle(new Point(10, 10), new Size(100, 50));
path.fillColor = 'blue';
path.strokeColor = new Color(1, 0, 0); // красная обводка
path.strokeWidth = 5;
  • fillColor – задаёт внутренний цвет фигуры.
  • strokeColor – задаёт цвет контура.
  • strokeWidth – ширина линии контура.

Градиенты

Paper.js поддерживает линейные и радиальные градиенты через объект Gradient.

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

var from = new Point(0, 0);
var to = new Point(100, 100);

var gradient = new Gradient(['red', 'yellow'], [0, 1]);
var rectangle = new Path.Rectangle(new Point(20, 20), new Size(200, 100));
rectangle.fillColor = new Color(gradient, from, to);
  • Массив цветов определяет ключевые точки градиента.
  • Массив значений [0, 1] задаёт положение цветов по линии градиента.

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

var gradient = new Gradient(['white', 'blue']);
var circle = new Path.Circle(new Point(200, 200), 80);
circle.fillColor = new Color(gradient, new Point(200, 200), new Point(200, 200), 'radial');
  • Радиальный градиент растёт от центра к краям фигуры.
  • Параметр 'radial' указывает тип градиента.

Полупрозрачные цвета и смешивание

Полупрозрачные цвета позволяют создавать эффекты наложения. Прозрачность задаётся через alpha или через RGBA:

var circle1 = new Path.Circle(new Point(100, 100), 50);
circle1.fillColor = new Color(1, 0, 0, 0.5);

var circle2 = new Path.Circle(new Point(130, 130), 50);
circle2.fillColor = new Color(0, 0, 1, 0.5);

На пересечении фигур цвета смешиваются визуально.

Цвета для текста

var text = new PointText(new Point(50, 150));
text.content = 'Пример текста';
text.fillColor = 'green';
text.fontSize = 30;
  • fillColor управляет цветом текста.
  • Обводка текста (strokeColor) работает аналогично фигурам.

Дополнительные возможности

  1. Цветовые компоненты можно изменять напрямую:
var color = new Color(0.5, 0.5, 0.5);
color.red = 1; // изменяет компонент красного
color.alpha = 0.8; // изменяет прозрачность
  1. Копирование цветов:
var color1 = new Color('blue');
var color2 = color1.clone();
color2.green = 1; // создаём новый оттенок
  1. Сравнение цветов:
var c1 = new Color('red');
var c2 = new Color(1, 0, 0);
console.log(c1.equals(c2)); // true

Практические советы

  • Для плавных анимаций лучше использовать RGB с alpha, чтобы легко управлять прозрачностью.
  • Градиенты создают более выразительные визуальные эффекты на фигурах с кривыми.
  • При работе с большими сценами рекомендуется минимизировать количество прозрачных слоёв для оптимизации производительности.

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

Оглавление