C#二次開發BIMFACE系列38 網頁整合開發2審圖系統中模型或圖紙批註

在運維或協同的場景中，經常需要對模型或圖紙進行批註，及時記錄已發現的問題並交給相關負責的人員。

在開始實現功能之前，先了解一下BIMFACE中有關批註的一些概念及功能說明。

1。 基本概念

批註指的是在當前場景視角下新增“雲線”、“箭頭”等圖元，輔助使用者進行標記的功能，它適用於所有的向量圖紙及三維模型場景。

提示：在三維場景中，一旦開啟繪製批註，則場景的視角將被固定，直到結束繪製批註。

2。 批註樣式

BIMFACE中的批註樣式設定分為四類，分別為批註型別、線寬、批註線顏色及填充色。

其中，批註型別有7類，分別為：

箭頭

雲線框

雲線

折線

矩形

圓形

十字

文字

在BIMFACE官方示例Demo中 https：//bimface。com/developer-jsdemo#816 提供的批註是下面的樣式

透過自定義繪製方式將【批註】功能按鈕新增到普通工具欄的末尾處，點選【批註】按鈕，彈出批註工具欄

在批註工具欄的下方提供了 “批註描述”文字框、【儲存】、【取消】按鈕，該實現方式可以滿足一般的批註要求，主要是提供的批註描述功能過於簡單。在施工圖審查系統中對模型/圖紙的批註功能有更復雜的要求，這時候就需要自定義彈出一個批註面板以滿足複雜的業務要求。

下圖中是在業務複雜的施工圖審查系統中實現的批註功能。

在頁面頂端的按鈕區域中放置了【新增批註】、【取消批註】、【新增意見】功能按鈕。操作步驟如下：

（1）點選【新增批註】按鈕，模型下方顯示了“批註工具欄”，可以在模型上做不同需求的批註。

（2）點選【新增意見】按鈕，彈出自定義的複雜審查意見面板，填寫具體的審查意見，點選【儲存】按鈕，將模型上的批註資訊與審查意見儲存到資料庫中。右側審查意見區域重新整理，載入所有審查意見。

（3）雙擊任意一條審查意見，實現2個功能。a、自動還原批註資訊到模型且旋轉到對應的視角上。b、自動彈出複雜審查意見面板並顯示意見。

（4）如有需要，修改審查意見並儲存。

下面介紹詳細的實現步驟。

1、建立批註工具條

先定義自定義模型檢視器物件

var modelViewer = { toolbar： undefined， // 普通工具條 annotationmanager： undefined， // annotation的繪製管理器 annotationToolbar： undefined， // 批註工具條 annotationControl： undefined // 重寫annotation的儲存、取消 }；

建立批註工具條

// 建立批註function createAnnotation（viewer） { modelViewer。toolbar。hide（）； //隱藏普通工具條 if （！modelViewer。annotationmanager） { var config = new Glodon。Bimface。Plugins。Annotation。AnnotationToolbarConfig（）； config。viewer = viewer； var annotationToolbar = new Glodon。Bimface。Plugins。Annotation。AnnotationToolbar（config）； modelViewer。annotationToolbar = annotationToolbar； modelViewer。annotationmanager = annotationToolbar。getAnnotationManager（）； // 移除預設的annotationToolbar control var control = $（modelViewer。annotationToolbar。domElement。lastElementChild）； var html = control［0］。innerHTML； modelViewer。annotationControl = $（html）； control。remove（）； modelViewer。annotationControl。find（‘。bf-save’）。off（‘click’）。on（‘click’， function （） { saveAnnotation（）； }）； modelViewer。annotationControl。find（‘。bf-cancel’）。off（‘click’）。on（‘click’， function （） { cancelAnnotation（）； }）； } modelViewer。annotationToolbar。show（）；//顯示批註工具條}

將此方法繫結到【新增批註】按鈕的click事件，執行程式點選該按鈕即可顯示批註工具條。

2、繪製批註

在模型中手動選擇合適的批註工具，也可以新增文字描述。

3、填寫審查意見

自定義審查意見面板使用EasyUI元件實現，沒有技術含量，這裡不做介紹。根據審圖的具體要求填寫審查意見。

4、儲存批註與審查意見

儲存前先獲取模型的批註資訊，需要呼叫BIMFACE的JavaScript API

modelViewer。annotationmanager。getAnnotationList（） 獲取批註內容，不包含視角資訊。

modelViewer。annotationmanager。getCurrentState（） 獲取當前模型視角狀態資訊，包含批租內容。

// 獲取批註資訊function getAnnotationInfo（） { var annotInfo = “”； if （modelViewer。annotationmanager） { if （modelViewer。annotationmanager。getAnnotationList（）。length > 0） { //轉換成Json字串後就可以儲存到資料庫中 var annotationList = modelViewer。annotationmanager。getAnnotationList（）；//獲取批註內容，不包含視角資訊 var currentState = modelViewer。annotationmanager。getCurrentState（）； //獲取當前模型視角狀態資訊，包含批租內容 var imgStr = “”； // 批註匯出快照 modelViewer。annotationmanager。createSnapshot（function （img） { // 非同步生成截圖後的回撥函式，引數為base64的字串 imgStr = img； }）； var tempObj = { “annotationList”： JSON。stringify（annotationList）， “currentState”： JSON。stringify（currentState） //“img”： imgStr //暫時不儲存這個 }； annotInfo = JSON。stringify（tempObj）； } } return annotInfo；}

批註內容類似下面樣式

［{ “rotation”： 0， “markupType”： “CloudRect”， “drawPoints”： ［ ［-11601。953138805808， 185。67362590978166， 58720。339506105716］， ［-8639。776307523922， -4606。333849878425， 56890。48458357735］ ］， “strokeStyle”： “rgba（208，2，27，1）”， “lineWidth”： 3， “fillStyle”： “rgba（255，255，255，0）”， “baseUnit”： “30”， “bNeedHitByBbox”： true， “drawEnd”： true， “markupId”： 1583144631002}］

視角狀態資訊類似下面樣式

{ “annotationList”： ［{ “rotation”： 0， “markupType”： “CloudRect”， “drawPoints”： ［ ［-11601。953138805808， 185。67362590978166， 58720。339506105716］， ［-8639。776307523922， -4606。333849878425， 56890。48458357735］ ］， “strokeStyle”： “rgba（208，2，27，1）”， “lineWidth”： 3， “fillStyle”： “rgba（255，255，255，0）”， “baseUnit”： “30”， “bNeedHitByBbox”： true， “drawEnd”： true， “markupId”： 1583144631002 }］， “state”： { “state”： { “isolateAction”： null， “actions”： ［］， “sceneState”： 0， “version”： “1。0” }， “camera”： { “name”： “persp”， “position”： { “x”： -19566。07280063608， “y”： -10286。284780194706， “z”： 68124。8600741987 }， “target”： { “x”： 37799。9979859597， “y”： 47079。99749213971， “z”： 10758。999426902741 }， “up”： { “x”： 0， “y”： -0。000003673205473822021， “z”： 0。9999999999932538 }， “fov”： 45， “version”： 1 }， “selection”： ［］， “axisGrid”： { “fileInfos”： ［］， “gridLineColor”： { “red”： 51， “green”： 51， “blue”： 51， “alpha”： 1 }， “gridBubbleColor”： { “red”： 51， “green”： 51， “blue”： 51， “alpha”： 1 }， “bIsBringToFront”： false， “bIsEnableHover”： true } }}

獲取審查意見資訊很簡單，就是表單操作，此處不做介紹。

使用JQuery的Ajax（）方法將批註資訊與審查意見儲存到資料庫中，比較簡單，此處不做介紹。

5、恢復(檢視)批註與審查意見

審查意見列表中載入了資料庫中儲存的記錄。雙擊任一筆記錄，彈出審查意見面板並賦值審查資訊，比較簡單，不做簡介。

雙擊任一筆記錄的同時恢復批註資訊，這裡需要呼叫BIMFACE的JavaScript API

modelViewer。annotationmanager。setState（）； // 設定場景視角

modelViewer。annotationmanager。setAnnotationList（）； //設定批註

// 設定批註即視角function setAnnotationAndState（state， annoList） { if （modelViewer。annotationmanager） { modelViewer。annotationmanager。clear（）；//清除之前的批註 if （state ！= null） { modelViewer。annotationmanager。setState（JSON。parse（state））； // 先設定場景視角 } if （annoList ！= null） { modelViewer。annotationmanager。setAnnotationList（JSON。parse（annoList））；//再設定新的批註 } }}

以上操作完成後，如果退出批註需要解除安裝批註

// 三維模型取消批註 function cancelAnnotation（） { endDrawing（）； }

// 結束批註function endDrawing（） { //解除安裝批註 if （modelViewer。annotationmanager） { modelViewer。annotationmanager。endDrawing && modelViewer。annotationmanager。endDrawing（）； $（modelViewer。annotationToolbar。domElement）。addClass（‘bf-hide’）；//隱藏批註工具條 modelViewer。toolbar。show（）； //顯示普通工具條 }}

系列文章主要技術：BIM、輕量化引擎、BIMFACE、BIMFACE二次開發、C#、。NET、二次開發、RESTful API、WebAPI

歡迎關注、點贊、評論、轉發，每天都能獲取優質內容。

回覆101，或者私信作者獲取《BIMFACE二次開發C#版SDK》。