Регистрация методов

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

Методы элементов SVG

В SVG.js любой элемент наследует методы от базового класса SVG.Element. Регистрация методов осуществляется через функцию SVG.extend(), которая позволяет добавлять новые функции к отдельным типам элементов или к нескольким сразу.

Синтаксис:

SVG.extend(ElementClass, {
    methodName: function(params) {
        // тело метода
        return this; // для цепочек вызовов
    }
});
  • ElementClass – класс элемента (SVG.Rect, SVG.Circle, SVG.Path и т.д.).
  • methodName – название создаваемого метода.
  • params – аргументы метода.
  • return this – обязательное условие для поддержки цепочек вызовов.

Пример регистрации метода для прямоугольника:

SVG.extend(SVG.Rect, {
    highlight: function(color = 'red') {
        this.stroke({ color: color, width: 5 });
        return this;
    }
});

let draw = SVG().addTo('body').size(300, 300);
let rect = draw.rect(100, 100).fill('blue').highlight();

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

Расширение нескольких классов одновременно

SVG.extend() позволяет регистрировать методы не только для одного класса, но и для массива классов. Это удобно, когда одинаковая функциональность должна применяться к разным типам элементов.

SVG.extend([SVG.Rect, SVG.Circle, SVG.Ellipse], {
    animateColor: function(color, duration = 1000) {
        this.animate(duration).fill(color);
        return this;
    }
});

draw.rect(50, 50).animateColor('green', 500);
draw.circle(40).animateColor('yellow', 1200);

Здесь метод animateColor стал доступен сразу для прямоугольников, кругов и эллипсов.

Регистрация статических методов

Кроме методов экземпляров, SVG.js поддерживает статические методы, которые привязываются не к отдельным объектам, а к самому классу. Для этого используется функция SVG.extend() с объектом, содержащим ключ static:

SVG.extend(SVG.Circle, {
    static: {
        createRandom: function(maxRadius = 50) {
            return this().circle(Math.random() * maxRadius).fill('#' + Math.floor(Math.random()*16777215).toString(16));
        }
    }
});

let circle = SVG.Circle.createRandom(80);
draw.add(circle);

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

Параметры и обработка аргументов

Методы могут принимать любое количество аргументов и использовать объекты конфигурации для гибкой настройки:

SVG.extend(SVG.Path, {
    dashedLine: function(options = {}) {
        const { color = 'black', width = 2, dash = '5,5' } = options;
        this.stroke({ color, width, dasharray: dash });
        return this;
    }
});

draw.path('M10 80 C 40 10, 65 10, 95 80').dashedLine({ color: 'purple', dash: '10,5' });

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

Сохранение цепочек вызовов

SVG.js активно использует цепочки вызовов, поэтому при создании метода важно всегда возвращать this. Это позволяет использовать методы последовательно:

draw.rect(80, 80)
    .fill('orange')
    .stroke({ color: 'black', width: 3 })
    .highlight('green')
    .animateColor('yellow', 800);

Без return this подобная цепочка вызовов будет недоступна, и вызовы следующих методов вызовут ошибку.

Расширение SVG.js глобально

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

SVG.extend(SVG, {
    randomColor: function() {
        return '#' + Math.floor(Math.random() * 16777215).toString(16);
    }
});

draw.rect(60, 60).fill(SVG.randomColor());

Такой подход упрощает код и делает библиотеку более удобной в больших проектах.

Принципы организации собственных методов

  1. Однозначные названия – имя метода должно отражать действие.
  2. Возврат this – для поддержки цепочек.
  3. Гибкие параметры – использование объектов конфигурации вместо длинного списка аргументов.
  4. Расширяемость – если метод может понадобиться для нескольких классов, лучше сразу регистрировать его для массива классов.
  5. Чистота кода – внутри метода желательно использовать внутренние методы SVG.js для совместимости и корректного рендеринга.

Взаимодействие с анимациями

Методы часто используются совместно с анимациями, которые предоставляет SVG.js. Для этого можно внутри метода вызывать animate():

SVG.extend(SVG.Rect, {
    pulse: function(scale = 1.2, duration = 600) {
        this.animate(duration, '<>')
            .scale(scale)
            .after(() => this.animate(duration, '<>').scale(1));
        return this;
    }
});

draw.rect(50, 50).fill('blue').pulse(1.5, 800);

Метод pulse создает эффект «пульсации» элемента, полностью управляемый через цепочку вызовов, что демонстрирует мощь расширяемости SVG.js.

Методы, зарегистрированные через SVG.extend(), являются неотъемлемой частью архитектуры расширяемости библиотеки, позволяя создавать сложные графические интерфейсы, анимации и повторно используемые компоненты с минимальным количеством повторяющегося кода.

Оглавление