C#開發BIMFACE系列38 網頁集成開發2：審圖系統中的模型或圖紙批註
- 2020 年 3 月 18 日
- 筆記
系列目錄 【已更新最新開發文章，點擊查看詳細】
在運維或協同的場景中，經常需要對模型或圖紙進行批註，及時記錄已發現的問題並交給相關負責的人員。
在開始實現功能之前，先了解一下BIMFACE中有關批註的一些概念及功能說明。
1. 基本概念
批註指的是在當前場景視角下添加「雲線」、「箭頭」等圖元，輔助使用者進行標記的功能，它適用於所有的矢量圖紙及三維模型場景。
在三維場景中，一旦開啟繪製批註，則場景的視角將被固定，直到結束繪製批註。
2. 批註樣式
BIMFACE中的批註樣式設置分為四類，分別為批註類型、線寬、批註線顏色及填充色。
其中，批註類型有7類，分別為：
- 箭頭
- 雲線框
- 雲線
- 折線
- 矩形
- 圓形
- 十字
- 文字
在BIMFACE官方示例Demo中 https://bimface.com/developer-jsdemo#816 提供的批註是下面的樣式
通過自定義繪製方式將【批註】功能按鈕添加到普通工具欄的末尾處，點擊【批註】按鈕，彈出批註工具欄
在批註工具欄的下方提供了 「批註描述」文本框、【保存】、【取消】按鈕，該實現方式可以滿足一般的批註要求，主要是提供的批註描述功能過於簡單。在施工圖審查系統中對模型/圖紙的批註功能有更複雜的要求，這時候就需要自定義彈出一個批註面板以滿足複雜的業務要求。
下圖中是在業務複雜的施工圖審查系統中實現的批註功能。
在頁面頂端的按鈕區域中放置了【添加批註】、【取消批註】、【新增意見】功能按鈕。操作步驟如下：
（1）點擊【添加批註】按鈕，模型下方顯示了「批註工具欄」，可以在模型上做不同需求的批註。
（2）點擊【新增意見】按鈕，彈出自定義的複雜審查意見面板，填寫具體的審查意見，點擊【保存】按鈕，將模型上的批註資訊與審查意見保存到資料庫中。右側審查意見區域刷新，載入所有審查意見。
（3）雙擊任意一條審查意見，實現2個功能。a、自動還原批註資訊到模型且旋轉到對應的視角上。b、自動彈出複雜審查意見面板並顯示意見。
（4）如有需要，修改審查意見並保存。
下面介紹詳細的實現步驟。
1、創建批註工具條
先定義自定義模型查看器對象
1 var modelViewer = { 2 toolbar: undefined, // 普通工具條 3 annotationmanager: undefined, // annotation的繪製管理器 4 annotationToolbar: undefined, // 批註工具條 5 annotationControl: undefined // 重寫annotation的保存、取消 6 };
創建批註工具條
1 // 創建批註 2 function createAnnotation(viewer) { 3 modelViewer.toolbar.hide(); //隱藏普通工具條 4 if (!modelViewer.annotationmanager) { 5 var config = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbarConfig(); 6 config.viewer = viewer; 7 var annotationToolbar = new Glodon.Bimface.Plugins.Annotation.AnnotationToolbar(config); 8 modelViewer.annotationToolbar = annotationToolbar; 9 modelViewer.annotationmanager = annotationToolbar.getAnnotationManager(); 10 // 移除默認的annotationToolbar control 11 var control = $(modelViewer.annotationToolbar.domElement.lastElementChild); 12 var html = control[0].innerHTML; 13 modelViewer.annotationControl = $(html); 14 15 control.remove(); 16 modelViewer.annotationControl.find('.bf-save').off('click').on('click', function () { 17 saveAnnotation(); 18 }); 19 modelViewer.annotationControl.find('.bf-cancel').off('click').on('click', function () { 20 cancelAnnotation(); 21 }); 22 } 23 modelViewer.annotationToolbar.show();//顯示批註工具條 24 }
將此方法綁定到【添加批註】按鈕的click事件，運行程式點擊該按鈕即可顯示批註工具條。
2、繪製批註
在模型中手動選擇合適的批註工具，也可以添加文字描述。
3、填寫審查意見
自定義審查意見面板使用EasyUI組件實現，沒有技術含量，這裡不做介紹。根據審圖的具體要求填寫審查意見。
4、保存批註與審查意見
保存前先獲取模型的批註資訊，需要調用BIMFACE的JavaScript API
modelViewer.annotationmanager.getAnnotationList() 獲取批註內容，不包含視角資訊。
modelViewer.annotationmanager.getCurrentState() 獲取當前模型視角狀態資訊，包含批租內容。
1 // 獲取批註資訊 2 function getAnnotationInfo() { 3 var annotInfo = ""; 4 if (modelViewer.annotationmanager) { 5 if (modelViewer.annotationmanager.getAnnotationList().length > 0) { 6 7 //轉換成Json字元串後就可以保存到資料庫中 8 var annotationList = modelViewer.annotationmanager.getAnnotationList();//獲取批註內容，不包含視角資訊 9 var currentState = modelViewer.annotationmanager.getCurrentState(); //獲取當前模型視角狀態資訊，包含批租內容 10 var imgStr = ""; 11 12 // 批註導出快照 13 modelViewer.annotationmanager.createSnapshot(function (img) { 14 // 非同步生成截圖後的回調函數，參數為base64的字元串 15 imgStr = img; 16 }); 17 18 var tempObj = { 19 "annotationList": JSON.stringify(annotationList), 20 "currentState": JSON.stringify(currentState) 21 //"img": imgStr //暫時不保存這個 22 }; 23 24 annotInfo = JSON.stringify(tempObj); 25 } 26 } 27 28 return annotInfo; 29 }
批註內容類似下面樣式
1 [{ 2 "rotation": 0, 3 "markupType": "CloudRect", 4 "drawPoints": [ 5 [-11601.953138805808, 185.67362590978166, 58720.339506105716], 6 [-8639.776307523922, -4606.333849878425, 56890.48458357735] 7 ], 8 "strokeStyle": "rgba(208,2,27,1)", 9 "lineWidth": 3, 10 "fillStyle": "rgba(255,255,255,0)", 11 "baseUnit": "30", 12 "bNeedHitByBbox": true, 13 "drawEnd": true, 14 "markupId": 1583144631002 15 }]
視角狀態資訊類似下面樣式
1 { 2 "annotationList": [{ 3 "rotation": 0, 4 "markupType": "CloudRect", 5 "drawPoints": [ 6 [-11601.953138805808, 185.67362590978166, 58720.339506105716], 7 [-8639.776307523922, -4606.333849878425, 56890.48458357735] 8 ], 9 "strokeStyle": "rgba(208,2,27,1)", 10 "lineWidth": 3, 11 "fillStyle": "rgba(255,255,255,0)", 12 "baseUnit": "30", 13 "bNeedHitByBbox": true, 14 "drawEnd": true, 15 "markupId": 1583144631002 16 }], 17 "state": { 18 "state": { 19 "isolateAction": null, 20 "actions": [], 21 "sceneState": 0, 22 "version": "1.0" 23 }, 24 "camera": { 25 "name": "persp", 26 "position": { 27 "x": -19566.07280063608, 28 "y": -10286.284780194706, 29 "z": 68124.8600741987 30 }, 31 "target": { 32 "x": 37799.9979859597, 33 "y": 47079.99749213971, 34 "z": 10758.999426902741 35 }, 36 "up": { 37 "x": 0, 38 "y": -0.000003673205473822021, 39 "z": 0.9999999999932538 40 }, 41 "fov": 45, 42 "version": 1 43 }, 44 "selection": [], 45 "axisGrid": { 46 "fileInfos": [], 47 "gridLineColor": { 48 "red": 51, 49 "green": 51, 50 "blue": 51, 51 "alpha": 1 52 }, 53 "gridBubbleColor": { 54 "red": 51, 55 "green": 51, 56 "blue": 51, 57 "alpha": 1 58 }, 59 "bIsBringToFront": false, 60 "bIsEnableHover": true 61 } 62 } 63 }
獲取審查意見資訊很簡單，就是表單操作，此處不做介紹。
使用JQuery的Ajax()方法將批註資訊與審查意見保存到資料庫中，比較簡單，此處不做介紹。
5、恢復(查看)批註與審查意見
審查意見列表中載入了資料庫中保存的記錄。雙擊任一筆記錄，彈出審查意見面板並賦值審查資訊，比較簡單，不做簡介。
雙擊任一筆記錄的同時恢復批註資訊，這裡需要調用BIMFACE的JavaScript API
modelViewer.annotationmanager.setState(); // 設置場景視角
modelViewer.annotationmanager.setAnnotationList(); //設置批註
1 // 設置批註即視角 2 function setAnnotationAndState(state, annoList) { 3 if (modelViewer.annotationmanager) { 4 modelViewer.annotationmanager.clear();//清除之前的批註 5 if (state != null) { 6 modelViewer.annotationmanager.setState(JSON.parse(state)); // 先設置場景視角 7 } 8 if (annoList != null) { 9 modelViewer.annotationmanager.setAnnotationList(JSON.parse(annoList));//再設置新的批註 10 } 11 } 12 }
以上操作完成後，如果退出批註需要卸載批註
1 // 三維模型取消批註 2 function cancelAnnotation() { 3 endDrawing(); 4 }
1 // 結束批註 2 function endDrawing() { 3 //卸載批註 4 if (modelViewer.annotationmanager) { 5 modelViewer.annotationmanager.endDrawing && modelViewer.annotationmanager.endDrawing(); 6 $(modelViewer.annotationToolbar.domElement).addClass('bf-hide');//隱藏批註工具條 7 modelViewer.toolbar.show(); //顯示普通工具條 8 } 9 }
