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