【翻译】使用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.EditModeArrowAutodesk.Viewing.Extensions.Markups.Core.EditModeCircleAutodesk.Viewing.Extensions.Markups.Core.EditModeCloudAutodesk.Viewing.Extensions.Markups.Core.EditModeFreehandAutodesk.Viewing.Extensions.Markups.Core.EditModeHighlightAutodesk.Viewing.Extensions.Markups.Core.EditModePenAutodesk.Viewing.Extensions.Markups.Core.EditModePolycloudAutodesk.Viewing.Extensions.Markups.Core.EditModePolylineAutodesk.Viewing.Extensions.Markups.Core.EditModeRectangleAutodesk.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...

免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删