「翻译」使用 Autodesk.Viewing.MarkupsCore 括展

让咱们来体验 Viewer v2.16 Autodesk.Viewing.MarkupsCore 的功能。首先要先确保你使用的 viewer 版号是正确的：

<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>

你知道能够透过浏览器的开发者工具直接测试代码吗？透过开发者工具就不用重整网页页面来载入新写好的代码，是否是很方便呢？！如今咱们透过 Promise 来载入扩展：

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

这是上面代码在 Console 执行的结果：

如今让咱们在画面上加入云形线标注涂丫：

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

那么他的执行结果就像这个样子：

那么咱们有哪些形式的标注涂丫能够使用呢？在 Viewer 里有提供这些选项能够使用：

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

那如今若是咱们想要保存画面的标注涂丫要怎么作呢？咱们能够像这个样子取得标注涂丫转的表明字串以及当前画面的状态

// 将刚刚产生的标注涂丫转换成字串
const markupsPersist = markup.generateData()
// 当前画面的状态 (zoom, direction, sections)
const viewerStatePersist = markup.viewer.getState()
// 离开编辑模式
markup.leaveEditMode()
// 隐藏涂丫工具，并回复导览工具
markup.hide()

小提醒：在咱们离开标注涂丫的编辑模式后就没办法在修改这些涂丫了，它会被转换成 SVG 的图片。

在来咱们就能够将刚刚取得的 markupsPersist 和 viewerStatePersist 传送到本身的服务器上，同时储存到数据库里面。未来要回复的话，就能够先从数据库获取 markupsPersist 和 viewerStatePersist，并透过下面的方法来回复：

// 开启涂丫工具
markup.show();

// 回复先前制做涂丫时的 Viewer 画面的状态
markup.viewer.restoreState( viewerStatePersist );
// 在 MyLayer 图层上重现涂丫
markup.loadMarkups( markupsPersist, 'MyLayer' );

原文：https://forge.autodesk.com/bl...