Alpha channel

Paper.js предоставляет мощные возможности работы с прозрачностью объектов через alpha channel, который определяет степень прозрачности элементов на холсте. Каждый объект имеет свойство opacity, значение которого контролирует прозрачность от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это значение применяется ко всем визуальным составляющим объекта: заливке, контуру и дочерним элементам группы.

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

В данном примере создаётся красный круг с 50% прозрачностью. Свойство opacity влияет на весь объект целиком, включая контур и заливку.

Отличие opacity от fillColor.alpha и strokeColor.alpha

Прозрачность можно задавать также отдельно для заливки и контура через свойство alpha цвета:

var rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [100, 100],
    fillColor: new Color(0, 0, 1, 0.3), // синий, прозрачность 30%
    strokeColor: new Color(1, 0, 0, 0.7) // красный, прозрачность 70%
});
  • fillColor.alpha – регулирует прозрачность только заливки.
  • strokeColor.alpha – регулирует прозрачность только контура.

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

Наследование прозрачности в группах

Когда несколько объектов объединены в Group, прозрачность группы комбинируется с прозрачностью её дочерних объектов. Итоговая прозрачность объекта внутри группы вычисляется как произведение opacity группы и opacity объекта:

var group = new Group({
    opacity: 0.6
});

var circle1 = new Path.Circle({
    center: [75, 75],
    radius: 30,
    fillColor: 'green',
    opacity: 0.5
});

var circle2 = new Path.Circle({
    center: [125, 75],
    radius: 30,
    fillColor: 'blue',
    opacity: 0.8
});

group.addChildren([circle1, circle2]);

В данном случае:

  • Для circle1 итоговая прозрачность = 0.6 * 0.5 = 0.3
  • Для circle2 итоговая прозрачность = 0.6 * 0.8 = 0.48

Это важно учитывать при создании сложных композиций, чтобы добиться ожидаемой визуальной плотности.

Анимация alpha channel

Paper.js позволяет анимировать прозрачность объектов, изменяя свойство opacity в функции onFrame.

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [150, 100],
    fillColor: 'orange',
    opacity: 0
});

function onFrame(event) {
    rect.opacity = Math.abs(Math.sin(event.count * 0.05));
}

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

Смешивание прозрачности с цветом

Paper.js поддерживает RGBA цвета, где alpha влияет на прозрачность заливки и контура. При наложении объектов с разной прозрачностью Paper.js автоматически применяет стандартное смешивание цветов, создавая реалистичные полупрозрачные эффекты:

var circle1 = new Path.Circle({
    center: [100, 100],
    radius: 60,
    fillColor: new Color(1, 0, 0, 0.5) // красный, 50%
});

var circle2 = new Path.Circle({
    center: [140, 100],
    radius: 60,
    fillColor: new Color(0, 0, 1, 0.5) // синий, 50%
});

В зоне пересечения цветов формируется фиолетовый полупрозрачный участок, что демонстрирует работу alpha channel на уровне пикселей.

Прозрачность градиентов и паттернов

Для градиентов также можно задавать прозрачность:

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

var rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [200, 100],
    fillColor: new Color(gradient, new Point(0,0), new Point(200,0))
});

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

Работа с прозрачностью в экспортируемых изображениях

При экспорте холста через project.exportSVG() или project.exportCanvas(), alpha channel сохраняется в соответствии с настройками opacity и alpha. Это гарантирует, что полупрозрачные элементы сохранят свой визуальный вид вне Paper.js.

Практические рекомендации

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

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

Оглавление