ADN Open CIS
Сообщество программистов Autodesk в СНГ

Forge Viewer: Markups с использованием SVG-файлов

У нас в блоге есть статьи об использовании расширения Autodesk.Viewing.MarkupsCore и о реализации собственного вида markup-ов (см. перевод  на нашем сайте). В последней мы показали, как использовать SVG для создания markup-ов, но, я полагаю, что будет полезным немного обобщить решение: то есть, позволить использовать любой SVG файл.

Для тестирования я взял несколько SVG-файлов с сайта bootstrap. Там Вы можете выбрать любую иконку и скачать её в формате SVG, например, эту.

Я также взял иконку Forge Viewer-а с сайта документации по сервисам Forge.

Так же, как и для ранее опубликованного примера с реализацией собственного вида markup-ов (см. перевод на нашем сайте) существует следующее ограничение: расширение не можете десериализовывать такие markup-ы из SVG, поэтому нам нужно будет анализировать содержимое SVG самостоятельно.

При запуске примера, доступные SVG-файлы будут отображены в маленькой панели в верхнем левом углу.

При нажатии на них, содержимое SVG-файлов будет скачано и проанализировано расширением StampExtension. Далее код работает по стандартной схеме работы с markup-ами: EditModeStamp -> StampCreateAction -> MarkupStamp.

Форма markup-а в данном случае будет задана группой - тегом SVG <g>, а не тегом <path> (как в примере выше), поскольку в исходном SVG могут присутствовать несколько групп. Объединение в группу также позволяет корректно работать с положением, поворотом и масштабом markup-а, см. код в конструкторе класса MarkupStamp.

В моём коде присутствуют некоторые ограничения. Он полагается на значения атрибута viewBox  при масштабировании и перемещении markup-а, созданного на основе файла SVG. Он предполагает, что значения min-x, min-y атрибута viewBox нулевые.

Полный код примера Вы можете найти здесь: https://github.com/adamenagy/Container/blob/master/drag%26drop-svg.zip

Примечание: Для работы примера требуется, чтобы html-файл располагался на сервере. Если у Вас есть Visual Studio Code, Вы можете воспользоваться расширением Live Server.

Источник: https://forge.autodesk.com/blog/stamp-markup-using-svg-file