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

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

Основные типы констант

SVG.js использует несколько категорий констант:

  1. Типы фигур

    • rect, circle, ellipse, line, polyline, polygon, path, text, image
    • Применяются при создании элементов через методы draw.rect(), draw.circle() и аналогичные.
    • Использование констант вместо строк повышает читаемость и снижает риск опечаток.

  2. Параметры выравнивания текста

    • TextAnchor — определяет горизонтальное выравнивание текста:

      SVG.TextAnchor.START
SVG.TextAnchor.MIDDLE
SVG.TextAnchor.END

    • Используется через метод text.attr('text-anchor', SVG.TextAnchor.MIDDLE).

  3. Методы трансформаций

    • Transform предоставляет предопределённые операции для rotate, scale, translate:

      SVG.Transform.ROTATE
SVG.Transform.SCALE
SVG.Transform.TRANSLATE

    • Обеспечивает безопасное применение трансформаций без ошибок в написании строк.

  4. Единицы измерения

    • Unit содержит основные единицы: PX, CM, MM, IN, PT, PC, PERCENT

    • Позволяет указывать размеры элементов в явном формате:

      rect.width(50, SVG.Unit.PX).height(30, SVG.Unit.MM)

Использование перечислений

Перечисления (Enums) в SVG.js обычно представляют собой объект с набором фиксированных свойств. Пример:

const Align = {
  START: 'start',
  MIDDLE: 'middle',
  END: 'end'
}

text.attr('text-anchor', Align.MIDDLE)

Основные преимущества:

  • Централизованное хранение значений.
  • Исключение опечаток при вводе строк.
  • Улучшение автодополнения в редакторах кода.

Константы для стилей

SVG.js предоставляет набор констант для ключевых CSS-свойств:

  • StrokeLineCap — варианты окончания линии: BUTT, ROUND, SQUARE.
  • StrokeLineJoin — варианты соединения линий: MITER, ROUND, BEVEL.
  • FillRule — правила заполнения многоугольников: NONZERO, EVENODD.

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

line.stroke({ color: '#f06', width: 5, linecap: SVG.StrokeLineCap.ROUND })
polygon.fill({ color: '#0f6', rule: SVG.FillRule.EVENODD })

Константы для анимаций

Для методов анимации доступны предопределённые константы, упрощающие управление временными функциями:

  • Easing:

    SVG.Easing.LINEAR
SVG.Easing.EASE
SVG.Easing.EASE_IN
SVG.Easing.EASE_OUT
SVG.Easing.EASE_IN_OUT

  • Применяются через метод animate():

    rect.animate(1000, SVG.Easing.EASE_IN_OUT).move(200, 200)

  • Direction — определяет направление циклической анимации:

    SVG.Direction.NORMAL
SVG.Direction.REVERSE
SVG.Direction.ALTERNATE

Практика применения констант

Использование констант повышает читаемость и поддерживаемость кода:

const draw = SVG().addTo('body').size(400, 400)

const circle = draw.circle(100).fill('#f06').stroke({
  color: '#000',
  width: 3,
  linecap: SVG.StrokeLineCap.ROUND,
  linejoin: SVG.StrokeLineJoin.BEVEL
})

circle.animate(2000, SVG.Easing.EASE_IN_OUT)
      .transform({ rotate: 360, cx: 50, cy: 50 })

Ключевые моменты:

  • Все предопределённые значения централизованы в константах.
  • Минимизируется риск опечаток при вводе строковых значений.
  • Повышается переносимость кода между проектами.

Расширение констант

SVG.js позволяет создавать собственные наборы констант для специфичных задач проекта. Пример:

const CustomColors = {
  PRIMARY: '#f06',
  SECONDARY: '#0f6',
  ACCENT: '#06f'
}

rect.fill(CustomColors.PRIMARY)

Такой подход особенно полезен при создании сложных графических интерфейсов или визуальных редакторов на базе SVG.js.

Оглавление