Заливка: цвет и прозрачность

Заливка (fill) в Two.js отвечает за внутреннюю окраску геометрических фигур. Любой объект, созданный через API библиотеки (прямоугольник, круг, путь), по умолчанию имеет свойства fill и stroke. Первое определяет цвет внутренней области фигуры, второе — цвет обводки.

Цвет заливки задаётся через свойство:

shape.fill = 'red';

Допустимы все стандартные CSS-форматы:

  • именованные цвета: 'blue', 'green'
  • HEX: '#ff0000', '#0f0'
  • RGB/RGBA: 'rgb(255, 0, 0)', 'rgba(255, 0, 0, 0.5)'
  • HSL: 'hsl(0, 100%, 50%)'

Two.js не ограничивает разработчика в формате, так как передаёт значение напрямую в canvas или SVG.

Прозрачность: управление альфа-каналом

Прозрачность заливки задаётся двумя способами:

1. Через RGBA

shape.fill = 'rgba(255, 0, 0, 0.5)';

Значение 0.5 — это альфа-канал (прозрачность), где:

  • 0 — полностью прозрачный
  • 1 — полностью непрозрачный

2. Через свойство opacity

shape.opacity = 0.5;

Важно учитывать:

  • opacity применяется ко всему объекту (и заливка, и обводка)
  • RGBA влияет только на цвет заливки или обводки отдельно

Комбинирование:

shape.fill = 'rgba(0, 0, 255, 0.5)';
shape.opacity = 0.5;

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

Отключение заливки

Для отключения заливки используется значение null или 'transparent':

shape.fill = 'transparent';

или

shape.noFill();

Метод noFill() является удобной обёрткой и предпочтителен для читаемости кода.

Динамическое изменение цвета

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

two.bind('update', function(frameCount) {
  shape.fill = `rgb(${frameCount % 255}, 100, 150)`;
});

Two.js автоматически перерисовывает сцену, если используется цикл обновления (two.play()).

Градиенты

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

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

var gradient = new Two.LinearGradient(
  0, 0, 100, 0,
  new Two.Stop(0, 'red'),
  new Two.Stop(1, 'blue')
);

shape.fill = gradient;

Параметры:

  • начальная точка (x1, y1)
  • конечная точка (x2, y2)
  • массив остановок (Stop)

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

var gradient = new Two.RadialGradient(
  0, 0, 50,
  new Two.Stop(0, 'white'),
  new Two.Stop(1, 'black')
);

shape.fill = gradient;

Управление остановками градиента

Каждая остановка задаётся через:

new Two.Stop(offset, color, opacity);

Пример:

new Two.Stop(0.5, 'red', 0.7);

Где:

  • offset — позиция (0–1)
  • color — цвет
  • opacity — прозрачность на этой точке

Наследование и обновление

Все визуальные свойства Two.js являются реактивными. Изменение fill автоматически помечает объект как изменённый:

shape.fill = '#00ff00';

Перерисовка происходит без ручного вызова, если активен рендер-цикл.

Работа с группами

Если фигуры объединены в группу:

var group = two.makeGroup(shape1, shape2);
group.fill = 'orange';

Свойство fill группы распространяется на дочерние элементы, если у них не задан собственный цвет.

Производительность

Частое изменение цвета (например, в анимациях) может влиять на производительность:

  • Canvas-рендеринг быстрее при простых цветах
  • SVG может быть медленнее при сложных градиентах

Рекомендации:

  • избегать лишних обновлений
  • использовать простые цвета вместо градиентов при необходимости оптимизации

Особенности рендеринга

Canvas

  • цвет применяется напрямую через fillStyle
  • прозрачность обрабатывается через глобальные настройки

SVG

  • создаются <linearGradient> или <radialGradient>
  • прозрачность управляется через fill-opacity

Комбинирование с обводкой

Заливка и обводка работают независимо:

shape.fill = 'yellow';
shape.stroke = 'black';
shape.linewidth = 2;

Возможны ситуации:

  • только заливка (stroke = 'transparent')
  • только обводка (noFill())

Практические шаблоны

Полупрозрачная фигура

shape.fill = 'rgba(0, 150, 255, 0.3)';
shape.stroke = '#0096ff';

Градиентный фон

var bg = two.makeRectangle(0, 0, width, height);
bg.fill = new Two.LinearGradient(
  0, 0, 0, height,
  new Two.Stop(0, '#ffffff'),
  new Two.Stop(1, '#cccccc')
);

Эффект наложения

shape1.fill = 'rgba(255, 0, 0, 0.5)';
shape2.fill = 'rgba(0, 0, 255, 0.5)';

При пересечении создаётся визуальное смешение цветов.

Важные нюансы

  • значение fill может быть не только строкой, но и объектом (градиент)
  • прозрачность через opacity влияет на всю иерархию объекта
  • порядок отрисовки влияет на визуальное восприятие прозрачности
  • градиенты являются объектами и могут переиспользоваться

Расширенные техники

Анимация градиента

gradient.stops[0].offset = Math.abs(Math.sin(time));

Позволяет создавать живые, динамические эффекты.

Программная генерация цветов

function randomColor() {
  return `hsl(${Math.random() * 360}, 100%, 50%)`;
}

shape.fill = randomColor();

Отладка

Распространённые ошибки:

  • неправильный формат цвета ('ff0000' вместо '#ff0000')
  • отсутствие обновления сцены (two.update() при ручном режиме)
  • конфликт прозрачности (opacity + RGBA)

Проверка:

console.log(shape.fill);

Взаимодействие с событиями

Цвет можно менять при взаимодействии:

element._renderer.elem.addEventListener('click', function() {
  shape.fill = 'green';
});

Для SVG это работает напрямую, для Canvas требуется дополнительная логика обработки событий.

Итоговая модель

Заливка в Two.js — это:

  • строка цвета или объект (градиент)
  • может включать прозрачность
  • может изменяться динамически
  • участвует в системе реактивного обновления сцены

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

Оглавление