Let's experience Viewer v2.16 Functions of Autodesk.Viewing.MarkupsCore.First, make sure you are using the correct viewer version number:

<link rel="stylesheet" href="https://developer.api.autodesk.com/derivativeservice/v1/viewers/style.min.css?v=v2.16" type="text/css" />
<script src="https://developer.api.autodesk.com/derivativeservice/v1/viewers/three.min.js"></script>
<script src="https://developer.api.autodesk.com/derivativeservice/v1/viewers/viewer3D.min.js?v=v2.16"></script>

Did you know you can test code directly through the developer tools of your browser?Is it convenient to load newly written code through developer tools without having to reshape the web page?!Now we load the extension through Promise:

let markup;
NOP_VIEWER.loadExtension( 'Autodesk.Viewing.MarkupsCore' ).then( ( markupsExt ) => {
  markup = markupsExt;
});

This is the result of executing the above code in Console:

Now let's add a cloud line label to the picture:

markup.enterEditMode();
const cloud = new Autodesk.Viewing.Extensions.Markups.Core.EditModeCloud( markup );
markup.changeEditMode( cloud );

Then his execution would look like this:

So what forms of labeling can we use?There are options available in the Viewer to use:

Autodesk.Viewing.Extensions.Markups.Core.EditModeArrow
Autodesk.Viewing.Extensions.Markups.Core.EditModeCircle
Autodesk.Viewing.Extensions.Markups.Core.EditModeCloud
Autodesk.Viewing.Extensions.Markups.Core.EditModeFreehand
Autodesk.Viewing.Extensions.Markups.Core.EditModeHighlight
Autodesk.Viewing.Extensions.Markups.Core.EditModePen
Autodesk.Viewing.Extensions.Markups.Core.EditModePolycloud
Autodesk.Viewing.Extensions.Markups.Core.EditModePolyline
Autodesk.Viewing.Extensions.Markups.Core.EditModeRectangle
Autodesk.Viewing.Extensions.Markups.Core.EditModeText

So now what if we want to save the label paint on the picture?We can get the representation string labeled with Yashu and the state of the current picture like this

// Convert the label you just generated to a string
const markupsPersist = markup.generateData()
// The state of the current picture (zoom, direction, sections)
const viewerStatePersist = markup.viewer.getState()
// Leave Edit Mode
markup.leaveEditMode()
// Hide Smear Tool and Reply to Guide Tool
markup.hide()

Tip: There is no way to modify the labels after we leave the editing mode of labeling. They will be converted to SVG pictures.

We can then transfer the just obtained markupsPersist and viewerStatePersist to our own server and store them in the database.To reply in the future, you can obtain markupsPersist and viewerStatePersist from the database and reply by:

// Reply to the state of the Viewer picture when you made a bamboo painting
markup.viewer.restoreState( viewerStatePersist );
// Reproduce the paint on the MyLayer layer
markup.loadMarkups( markupsPersist, 'MyLayer' );

Original: https://forge.autodesk.com/bl...