Shadow и тени

Paper.js предоставляет мощный и гибкий механизм для работы с тенями объектов через свойство shadow у элементов типа Path, Shape, Raster и Group. Тени создаются автоматически на основе настроек смещения, размытия и цвета, что позволяет добиваться реалистичных визуальных эффектов.

Свойства объекта shadow

Каждый объект, поддерживающий тени, имеет свойство shadow, которое представляет собой объект с набором ключевых параметров:

  • color – цвет тени. Поддерживаются стандартные CSS-цвета, включая rgba. Например:
path.shadowColor = new Color(0, 0, 0, 0.5); // полупрозрачная черная тень
  • blur – степень размытия тени, задается числом в пикселях. Чем выше значение, тем мягче границы тени.
path.shadowBlur = 12;
  • offset – смещение тени относительно объекта. Представлено объектом Point:
path.shadowOffset = new Point(10, 10);
  • opacity – непрозрачность тени. Влияет на прозрачность всей тени, независимо от цвета:
path.shadowOpacity = 0.6;

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

Применение теней к разным элементам

  1. К линиям и контурам (Path)
var path = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'red'
});
path.shadowColor = 'black';
path.shadowBlur = 15;
path.shadowOffset = new Point(8, 8);
path.shadowOpacity = 0.7;

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

  1. К фигурам (Shape)
var rectangle = new Shape.Rectangle({
    point: [200, 50],
    size: [120, 80],
    fillColor: 'blue'
});
rectangle.shadowColor = 'rgba(0,0,0,0.4)';
rectangle.shadowBlur = 10;
rectangle.shadowOffset = new Point(5, 5);

Фигуры со сложной геометрией также принимают тень по форме своего контура.

  1. К растровым изображениям (Raster)
var raster = new Raster('image.png');
raster.position = view.center;
raster.shadowColor = 'rgba(0,0,0,0.5)';
raster.shadowBlur = 20;
raster.shadowOffset = new Point(15, 15);

Тень добавляет глубину изображению и может имитировать естественное освещение.

  1. К группам (Group)
var group = new Group([path, rectangle]);
group.shadowColor = 'black';
group.shadowBlur = 12;
group.shadowOffset = new Point(10, 10);

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

Динамические тени

Тени можно анимировать, изменяя их свойства в цикле или через обработчики событий:

function onFrame(event) {
    path.shadowOffset = new Point(Math.sin(event.time * 2) * 20, 10);
    path.shadowBlur = 10 + 5 * Math.sin(event.time * 3);
}

Так можно создавать эффекты движения света или имитацию солнечного освещения.

Продвинутые техники

  • Мягкие тени: комбинирование большого значения shadowBlur с низкой opacity.
  • Тени разных цветов: использовать яркие или контрастные цвета для создания художественных эффектов.
  • Симулирование направленного света: менять shadowOffset динамически в зависимости от положения виртуального источника света.
  • Комбинация с BlendMode: тени можно накладывать через blendMode для создания сложных визуальных эффектов при пересечении объектов.

Советы по производительности

  • Использование слишком больших значений shadowBlur и сложных групп объектов может сильно нагружать рендер.
  • Для статичных теней предпочтительно предварительно рендерить объекты в отдельный Raster и добавлять тень к изображению.
  • Тени для групп следует использовать осторожно: Paper.js рисует их как один объект, что может увеличивать нагрузку при сложных анимациях.

Тени в Paper.js позволяют добавлять глубину, объем и реализм визуальным элементам. Управление параметрами color, blur, offset и opacity обеспечивает полный контроль над внешним видом, а динамическая анимация тени открывает широкие возможности для интерактивных сцен.

Оглавление