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、创建批注工具条

　　先定义自定义模型查看器对象

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 }

系列目录【已更新最新开发文章，点击查看详细】