Режимы наложения

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

Основные свойства

Каждый объект в Two.js имеет свойство blendMode, которое отвечает за режим наложения. Значение свойства задаётся строкой, соответствующей одному из стандартных режимов Canvas API. Например:

let circle = two.makeCircle(100, 100, 50);
circle.fill = '#ff0000';
circle.blendMode = 'multiply';

В этом примере красный круг будет наложен на фон и другие объекты с эффектом умножения цветов.

Список ключевых режимов:

  • normal — стандартное отображение, объекты перекрывают друг друга без смешивания.
  • multiply — умножение цветов, затемнённые области становятся более насыщенными.
  • screen — осветление изображения, используется для создания светящихся эффектов.
  • overlay — комбинация multiply и screen, сохраняет яркость и контраст.
  • darken — оставляет только более тёмные значения пикселей.
  • lighten — оставляет только более светлые значения пикселей.
  • color-dodge — увеличивает яркость нижнего слоя, создавая эффект подсветки.
  • color-burn — затемняет нижний слой, увеличивая контраст.
  • hard-light — сочетает multiply и screen, зависимо от верхнего слоя.
  • soft-light — мягкая подсветка или тень.
  • difference — вычитание цветов для создания контрастного эффекта.
  • exclusion — смягчённая версия difference, меньше контраста.

Использование на практике

Для создания сложных композиций несколько объектов с разными режимами накладываются друг на друга. Например:

let rect = two.makeRectangle(150, 150, 200, 200);
rect.fill = '#0000ff';
rect.blendMode = 'screen';

let ellipse = two.makeEllipse(180, 180, 100, 60);
ellipse.fill = '#ffcc00';
ellipse.blendMode = 'multiply';

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

Особенности работы с прозрачностью

Режимы наложения тесно связаны с альфа-каналом объектов. Прозрачные объекты (opacity < 1) позволяют увидеть эффект смешения цветов с нижележащими формами.

let semiCircle = two.makeCircle(200, 200, 80);
semiCircle.fill = '#ff0000';
semiCircle.opacity = 0.5;
semiCircle.blendMode = 'overlay';

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

Комбинирование нескольких слоев

Для сложных сцен рекомендуется использовать отдельные группы (Two.Group) и применять режим наложения на группы целиком. Это позволяет управлять множеством объектов как единым слоем:

let group = two.makeGroup();
group.add(rect, ellipse, semiCircle);
group.blendMode = 'soft-light';

Все объекты внутри группы будут взаимодействовать с нижележащими слоями через единый режим soft-light, что упрощает создание эффектов освещения и тени.

Влияние на производительность

Использование интенсивных режимов наложения (например, color-burn или difference) может замедлять рендеринг при большом количестве объектов, особенно при анимации. Оптимальной практикой является ограничение количества перекрывающихся объектов или использование статических слоёв для сложных визуальных эффектов.

Интерактивные эффекты

Режимы наложения отлично сочетаются с анимацией свойств fill, stroke и opacity. Изменение цвета или прозрачности объектов во времени создаёт динамическое смешение слоёв:

two.bind('update', function(frameCount) {
  ellipse.opacity = 0.5 + 0.5 * Math.sin(frameCount * 0.05);
});

В результате эллипс плавно меняет прозрачность, а режим наложения multiply обеспечивает непрерывное смешение цветов с нижележащими объектами.

Итоговая структура сцены

  • Фоновые слои — объекты с режимом normal или screen.
  • Основные элементы — объекты с multiply, overlay или soft-light.
  • Акцентные детали — объекты с color-dodge или hard-light для выделения.

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

Оглавление