Константы и перечисления

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

Типы рендеринга

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

  • Two.Types.svg – рендеринг через SVG. Подходит для векторной графики, масштабируемой без потери качества.
  • Two.Types.canvas – рендеринг через <canvas>. Предпочтителен для динамичных сцен с большим количеством объектов.
  • Two.Types.webgl – рендеринг с использованием WebGL. Оптимален для сложных графических эффектов и 3D-подобных визуализаций.

Пример использования:

const two = new Two({ type: Two.Types.webgl }).appendTo(document.body);

Константы для выравнивания

Выравнивание объектов контролируется с помощью перечислений Two.Anchor и Two.TextAlign:

  • Two.Anchor:

    • Two.Anchor.left
    • Two.Anchor.center
    • Two.Anchor.right

  • Two.TextAlign (для текста):

    • Two.TextAlign.left
    • Two.TextAlign.center
    • Two.TextAlign.right

Эти значения применяются при позиционировании текста или объектов относительно их центра или края.

const text = two.makeText('Two.js', 100, 100);
text.alignment = Two.Anchor.center;
text.baseline = Two.TextAlign.center;

Режимы отрисовки линий

Two.js использует константы для стиля линий:

  • Two.Linecap – определяет стиль окончания линии:

    • Two.Linecap.butt – линия заканчивается ровно на конечной точке.
    • Two.Linecap.round – линия оканчивается полукругом.
    • Two.Linecap.square – линия оканчивается прямоугольником, выходящим за точку.

  • Two.Linejoin – определяет способ соединения сегментов:

    • Two.Linejoin.miter – острый угол.
    • Two.Linejoin.round – закругление углов.
    • Two.Linejoin.bevel – срезанный угол.

Пример применения:

const line = two.makeLine(50, 50, 150, 150);
line.cap = Two.Linecap.round;
line.join = Two.Linejoin.bevel;
line.linewidth = 5;

Константы трансформаций

Two.js использует перечисления для управления трансформациями объектов:

  • Two.Transform:

    • Two.Transform.translate – смещение объекта.
    • Two.Transform.rotate – вращение.
    • Two.Transform.scale – масштабирование.
    • Two.Transform.skewX – наклон по оси X.
    • Two.Transform.skewY – наклон по оси Y.

Применение трансформации через методы:

circle.translation.set(100, 200);
circle.rotation = Math.PI / 4;
circle.scale = 1.5;

Константы цветов и прозрачности

Two.js поддерживает константы для управления цветами и прозрачностью:

  • Two.Opacity – задаёт уровень прозрачности: от 0 (полностью прозрачный) до 1 (полностью непрозрачный).
  • Two.Color – удобный класс для работы с цветами в формате HEX, RGB, HSL:
const fillColor = new Two.Color('#FF6347'); // Томато
shape.fill = fillColor;
shape.opacity = 0.7;

Two.js также поддерживает константы для градиентов и заливки через Two.LinearGradient и Two.RadialGradient.

Константы для анимации и интерполяции

Анимации в Two.js используют перечисления для управления типом интерполяции и цикличностью:

  • Two.Interpolation:

    • Two.Interpolation.linear – линейное движение.
    • Two.Interpolation.easeIn – ускорение к концу.
    • Two.Interpolation.easeOut – замедление к концу.
    • Two.Interpolation.easeInOut – комбинированное ускорение/замедление.

  • Two.Loop – определяет поведение повторяющихся анимаций:

    • Two.Loop.repeat – бесконечное повторение.
    • Two.Loop.once – одно выполнение.
    • Two.Loop.pingpong – движение туда и обратно.

Пример использования:

two.bind('update', function(frameCount, timeDelta) {
  shape.rotation += 0.01;
}).play();

Прочие полезные константы

  • Two.Resolution – влияет на точность векторных кривых и качество рендеринга.
  • Two.Capabilities – определяет доступные возможности рендерера (например, поддержка WebGL).
  • Two.Constants – объединяет базовые числовые и строковые значения, используемые во всех модулях библиотеки.

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

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

Оглавление