Opacity и прозрачность

В Paper.js прозрачность объектов задается через свойство opacity. Оно влияет на визуальное отображение элемента на холсте, позволяя сделать его полностью непрозрачным, частично прозрачным или полностью невидимым. Значение opacity варьируется от 0 до 1, где 0 означает полную прозрачность, а 1 — полное отсутствие прозрачности.

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

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

Прозрачность заливки и обводки

Paper.js различает opacity объекта и opacity отдельных составляющих: fillColor и strokeColor. Каждое из этих свойств может иметь собственный уровень прозрачности с помощью компонента alpha:

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

Важно понимать, что opacity объекта (path.opacity) умножается на прозрачность его компонентов. Если объект имеет opacity = 0.5, а его fillColor.alpha = 0.8, итоговая непрозрачность заливки составит 0.5 * 0.8 = 0.4.

Применение прозрачности к группам объектов

Группы в Paper.js наследуют прозрачность своих компонентов. Свойство opacity группы умножается на opacity всех вложенных объектов:

var group = new Group();
var circle = new Path.Circle([80, 80], 40);
circle.fillColor = 'green';
var rectangle = new Path.Rectangle([50, 50], [100, 60]);
rectangle.fillColor = 'blue';
group.addChild(circle);
group.addChild(rectangle);
group.opacity = 0.5;

В этом примере и круг, и прямоугольник будут отображаться с полупрозрачностью 50%, независимо от их индивидуальной настройки fillColor.alpha.

Анимация прозрачности

Изменение свойства opacity можно использовать для плавной анимации:

var circle = new Path.Circle({
    center: [150, 150],
    radius: 60,
    fillColor: 'orange',
    opacity: 1
});

function onFrame(event) {
    circle.opacity = (Math.sin(event.count / 20) + 1) / 2; 
}

Здесь прозрачность круга будет колебаться между 0 и 1, создавая эффект «мигания».

Прозрачность при наложении цветов

Paper.js использует альфа-композицию (alpha compositing) для рендеринга полупрозрачных объектов. Это означает, что при перекрытии двух объектов с прозрачностью итоговый цвет определяется формулой смешивания:

C_result = C_foreground * alpha_foreground + C_background * (1 - alpha_foreground)
  • C_result — результирующий цвет пикселя.
  • C_foreground и C_background — цвета переднего и заднего планов.
  • alpha_foreground — прозрачность переднего объекта.

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

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

В градиентах Paper.js каждый цветовой сегмент может иметь свой alpha-канал, что позволяет создавать плавные переходы прозрачности:

var gradient = new Gradient([
    new GradientStop(new Color(1, 0, 0, 1), 0),
    new GradientStop(new Color(1, 0, 0, 0), 1)
]);

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

В этом примере красный цвет постепенно становится прозрачным от левого края к правому.

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

  1. Для простых объектов достаточно использовать path.opacity.
  2. Для детальной настройки прозрачности заливки и обводки используйте fillColor.alpha и strokeColor.alpha.
  3. Для анимации плавного исчезновения или появления объектов изменяйте opacity на каждом кадре.
  4. Для групп объектов следует регулировать прозрачность через group.opacity, чтобы управлять всеми элементами одновременно.
  5. При сложных наложениях рекомендуется учитывать правила альфа-композиции для точного визуального результата.

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

Оглавление