March 24, 2021

Stamp markup using SVG file

Want to add custom SVG markup, as a Stamp?

We have a couple of blog posts on adding Custom Markups based on Using Autodesk.Viewing.MarkupsCore extension:

In this blog, I will add SVG, like Michael's example, but allow it to be rotated and moved, like Petr's example.

I found some SVG files on the bootstrap website to test with. You can select any of the icons and download them as SVG: e.g. https://icons.getbootstrap.com/icons/badge-4k/
I also took the Viewer icon from the Forge Documentation site.

The same restriction applies here as in the case of the Smiley sample: "The extension cannot currently deserialize custom markups from an SVG; you would have to parse the markup manually"

When running the sample, the available SVG files will be listed in a small panel in the top left corner.
When you click on them the SVG file's content will be fetched and passed to the StampExtension, and then it will go through EditModeStamp -> StampCreateAction -> MarkupStamp

The markup's shape, in this case, will be a group instead of a path, because the SVG file can have multiple paths in it already. In order to normalize the size and positioning of the SVG file content, I placed the whole thing in an additional group where I can apply translate and scale. See MarkupStamp constructor()

The code relies on the values of the viewBox attribute of the SVG element to set the scale and translate of the markup created from it. It assumes that the min-x and min-y part of it are 0.

You can find the source code here: https://github.com/wallabyway/offline-pdf-markup/tree/master/docs/adamn

and a Live DEMO here: https://wallabyway.github.io/offline-pdf-markup/adamn/drag-drop-svg.html

 

Posted by


Adam Nagy joined Autodesk back in 2005 and has been providing programming support, consulting, training and evangelism to external developers. He started his career in Budapest, then worked in Prague for 3 years and now lives in South England, UK.


At the moment focusing on Inventor and Fusion 360, plus cloud and mobile related technologies.


Adam has a...

Michael Beale

Autodesk

Michael Beale works for Autodesk Cloud Rendering team and focuses on client/server mashups that make the web-browser appear super-powered.  Starting with Autodesk Homestyler, then LMV-viewer, Prooflab and more recently a Stereo-Panorama service with webVR.

Related Posts