Fill и заливка

В Paper.js заливка объектов управляется свойством fillColor. Она определяет цвет, градиент или паттерн, используемый для заполнения внутренней области фигур. Любой объект, поддерживающий геометрию (например, Path, Shape), может иметь заливку.

let circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red'
});

В этом примере создается окружность с красной заливкой. Свойство fillColor может принимать:

  • Цвет в формате строки: 'red', '#ff0000', 'rgb(255,0,0)'.
  • Объект Color: позволяет задавать прозрачность, градиенты и сложные цвета.
let rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [100, 100],
    fillColor: new Color(0, 1, 0, 0.5) // зелёный с 50% прозрачностью
});

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

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

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

let linearGradient = new Gradient([
    new GradientStop(new Color('red'), 0),
    new GradientStop(new Color('yellow'), 1)
]);

let rectangle = new Path.Rectangle({
    point: [10, 10],
    size: [200, 100],
    fillColor: new Color(linearGradient, new Point(0,0), new Point(200,0))
});
  • GradientStop задает цвет и позицию (от 0 до 1).
  • Линейный градиент направляется от from к to.

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

let radialGradient = new Gradient([
    new GradientStop(new Color('blue'), 0),
    new GradientStop(new Color('white'), 1)
]);

let circle = new Path.Circle({
    center: [150, 150],
    radius: 100,
    fillColor: new Color(radialGradient, new Point(150,150), new Point(150,250))
});

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

Прозрачность и смешивание

Свойство opacity контролирует прозрачность всей фигуры, включая заливку и контур:

circle.opacity = 0.6; // полупрозрачная заливка

Для заливки можно отдельно управлять прозрачностью через компонент цвета alpha в Color:

circle.fillColor.alpha = 0.3; // только заливка

Для сложных эффектов можно использовать метод blendMode, который задает режим наложения:

circle.blendMode = 'multiply';

Доступные режимы: normal, multiply, screen, overlay и другие, аналогичные CSS.

Заливка сложных объектов

Path может состоять из нескольких сегментов, иметь кривые Безье, быть замкнутым или открытым. Заливка применяется только к замкнутым областям:

let path = new Path();
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));
path.closed = true;
path.fillColor = 'orange';

Если path.closed = false, заливка не отображается, только контур (strokeColor).

Для объединения нескольких фигур и применения общей заливки используют CompoundPath:

let circle1 = new Path.Circle([100, 100], 50);
let circle2 = new Path.Circle([130, 100], 50);
let compound = new CompoundPath({
    children: [circle1, circle2],
    fillColor: 'purple'
});

CompoundPath объединяет внутренние области фигур, создавая единое замкнутое пространство для заливки.

Паттерны и текстуры

Paper.js позволяет использовать изображения для заливки через Raster:

let raster = new Raster('pattern.png'); // изображение загружено
let rectangle = new Path.Rectangle([0,0], [200,200]);
rectangle.fillColor = new Color(raster);

Растр автоматически повторяется по области фигуры, создавая паттерн. Можно управлять масштабом и позицией с помощью raster.position и raster.scale.

Динамическая заливка

Заливку можно изменять в реальном времени, что полезно для анимаций:

let circle = new Path.Circle([200,200], 50);
circle.fillColor = 'blue';

function onFrame(event) {
    let hue = (event.count % 360) / 360;
    circle.fillColor.hue = hue * 360; // плавное изменение цвета
}

Здесь onFrame вызывается каждый кадр, позволяя анимировать оттенок, яркость и прозрачность заливки.

Вывод

Система заливки в Paper.js гибкая и поддерживает:

  • Простые цвета и прозрачность
  • Линейные и радиальные градиенты
  • CompoundPath и сложные формы
  • Паттерны через изображения
  • Анимацию и динамическое изменение цвета

Эти возможности делают Paper.js мощным инструментом для интерактивной графики и визуализации данных на Canvas.

Оглавление