「翻译」使用 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...