网页CAD(WEB CAD SDK)绘制的批注信息如何保存到图纸上

MxDraw

前言

用户在网页中浏览编辑DWG图纸之后，会在图纸上进行审图批注，批注的内容会保存到服务器或原图纸中，本章节我们讲一下保存批注信息的方法，如果你还不会创建一个在线浏览编辑CAD图纸的前端应用请参考MxDraw云图开发包的文档和mxcad库:

在线功能测试：https://demo.mxdraw3d.com:3000/mxcad/

操作界面如下：

实现步骤

用mxdraw绘制的批注图形，要保存到图纸上, 需要使用MxDraw云图开发包中对应服务进行保存 下面将详细讲解保存图纸批注的每一步。

首先下载MxDraw云图开发包开发包, 然后解压。可得到一个解压后的目录MxDrawCloudServer, 进入该目录, 运行Mx3dServer.exe软件。

点击按钮开始服务，再点击按钮VueBrowse 会加载一个网页，这个网页加载了一个在线浏览的图纸。            

该网页的源码在开发包的MxDrawCloudServer\SRC\sample\Browse\2d\Browse目录, 在该目录下找到 src\test\SaveDwg.ts文件, 代码如下:

1. let mxobj = MxFun.getCurrentDraw();
   
2. 
   
3.   let saveData:any = mxobj.saveMxEntityToObject(true);
   
4. 
   
5.   saveData.savefile = "../../SRC/TsWeb/public/demo/hhhhnew.dwg";
   
6. 
   
7.   saveData.filename = "../../SRC/TsWeb/public/demo/hhhh.dwg";
   
8. 
   
9. 
   
10. 
    
11.   console.log(saveData);
    
12. 
    
13.   //前端附带身份凭证的请求，服务器Access-Control-Allow-Origin 设为*不会生效.
    
14. 
    
15.   //所以需要  $api.defaults.withCredentials = false
    
16. 
    
17.   $api.defaults.withCredentials = false
    
18. 
    
19.     //$api.post("http://localhost:1337/savecomment", {
    
20. 
    
21.     $api.post(MxFun.getHostUrl() + ":1337/savecomment", {
    
22. 
    
23.     param: saveData
    
24. 
    
25.   }).then((response: any) => {
    
26. 
    
27.     if(response.data.ret == 0)
    
28. 
    
29.     {
    
30. 
    
31.       // 后台程序TsWebNodejs\routes\savedwg.js，它会调用MxFileConvert.exe使用MxDrawNode\src\mxconvert\SaveCommentToDwg.ts把批注数据，保存到demo目录下的hhhhnew.dwg文件中.
    
32. 
    
33.       const sSaveUrl = MxFun.getHostUrl() + ":3000/demo/hhhhnew.dwg";
    
34. 
    
35.       alert("保存成功，新文件下载地址:" + sSaveUrl);
    
36. 
    
37.     }
    
38. 
    
39.     else{
    
40. 
    
41.       alert("保存失败,错误码:" + response.data.ret);
    
42. 
    
43.       console.log(response.data);
    
44. 
    
45.     }
    
46. 
    
47.   })
    
48. 
    
49.   .catch((error: any)=> {
    
50. 
    
51.     alert("保存失败")
    
52. 
    
53.   });

复制代码

保存批注使用mxdraw提供的方法MxFun.getCurrentDraw().saveMxEntityToObject() ，得到一个JSON对象, 包含了页面中绘制的所有批注数据。

保存的两种方式

第一种方式是将这个数据保存在服务器的数据库中，再次打开这张图纸的时候，再去请求得到对应的批注数据，通过MxFun.getCurrentDraw().loadMxEntityFromJson(jsonString)在前端页面中直接恢复对应的批注。

第二种方式是直接保存到图纸上, 从上面代码得知，我们得到了所有批注数据的对象，在这个对象上设置了savefile 表示保存了包含了批注的新图纸服务器上的地址。而filename就是现在网页上打开的图纸的原图纸再服务器上的地址。

然后发起了一个post请求, 下面我们看看再服务器中是如何处理的。

首先我们在开发包中找到MxDrawCloudServer\Bin\MxDrawServer\Windows\routes\
savecomment.js

这里就是这个post请求接口定义的位置:

1. param.cmd = "savecomment";
   
2. 
   
3. (0, convert_1.callMxNodeJS)(param, (ret) => {
   
4. 
   
5.     res.json(ret);
   
6. 
   
7. });

复制代码

接下来我们找到callMxNodeJS这个函数, 在同目录下的convert.js文件中:

1. function callMxNodeJS(param, retcall) {
   
2. 
   
3.     if (!param["cmd"]) {
   
4. 
   
5.         retcall({ code: 6, message: "param.cmd empty" });
   
6. 
   
7.         return;
   
8. 
   
9.     }
   
10. 
    
11.     let converparamFile;
    
12. 
    
13.     if (param["file"]) {
    
14. 
    
15.         if (mxconfig_1.default.isAbsolutePath(param.file)) {
    
16. 
    
17.             converparamFile = param.file + "_param.json";
    
18. 
    
19.         }
    
20. 
    
21.         else {
    
22. 
    
23.             converparamFile = mxconfig_1.default.getUploadPath() + param.file + "_param.json";
    
24. 
    
25.         }
    
26. 
    
27.     }
    
28. 
    
29.     else {
    
30. 
    
31.         converparamFile = mxconfig_1.default.getUploadPath() + createUuid() + "_param.json";
    
32. 
    
33.     }
    
34. 
    
35.     converparamFile = converparamFile.replace(/\\/g, '/');
    
36. 
    
37.     param = JSON.stringify(param);
    
38. 
    
39.     fs.writeFile(converparamFile, param, function (error) {
    
40. 
    
41.         if (error) {
    
42. 
    
43.             retcall({ code: 2, message: "write param file error" });
    
44. 
    
45.             //fs.unlink(converparamFile);
    
46. 
    
47.             return;
    
48. 
    
49.         }
    
50. 
    
51.         var pathConvertExt = '"' + mxconfig_1.default.getMxNodeAppPath() + '"';
    
52. 
    
53.         var pathMxconvertJs = mxconfig_1.default.getMxBinPath() + "mxconvert.js";
    
54. 
    
55.         //var cmdparam = '"' + pathMxconvertJs + '"' + ' "{\"paramfile\":\"' + converparamFile + '\"}"';
    
56. 
    
57.         var cmdparam = '"' + pathMxconvertJs + '"' + ' fileparam filepath="' + converparamFile + '"';
    
58. 
    
59.         var cmd = pathConvertExt + " " + cmdparam;
    
60. 
    
61.         const exec = child_process.exec;
    
62. 
    
63.         exec(cmd, (err, stdout, stderr) => {
    
64. 
    
65.             if (err) {
    
66. 
    
67.                 retcall({ code: 3, message: "exec cmd failed" });
    
68. 
    
69.             }
    
70. 
    
71.             else {
    
72. 
    
73.                 try {
    
74. 
    
75.                     let index = stdout.lastIndexOf("{");
    
76. 
    
77.                     if (index != -1) {
    
78. 
    
79.                         stdout = stdout.substr(index);
    
80. 
    
81.                     }
    
82. 
    
83.                     let retCmd = JSON.parse(stdout);
    
84. 
    
85.                     retCmd.code = 0;
    
86. 
    
87.                     if (retCmd["resultfile"]) {
    
88. 
    
89.                         let strparam = fs.readFileSync(retCmd["resultfile"]);
    
90. 
    
91.                         if (strparam) {
    
92. 
    
93.                             let paramobj = JSON.parse(strparam);
    
94. 
    
95.                             retCmd.resultfile = paramobj;
    
96. 
    
97.                         }
    
98. 
    
99.                     }
    
100. 
     
101.                     if (retCmd["ret"] && retCmd["ret"] != 0)
     
102. 
     
103.                         retCmd.code = 7;
     
104. 
     
105.                     retcall(retCmd);
     
106. 
     
107.                 }
     
108. 
     
109.                 catch (err) {
     
110. 
     
111.                     console.log(err);
     
112. 
     
113.                     retcall({ code: 5, message: "exec cmd return error" });
     
114. 
     
115.                 }
     
116. 
     
117.             }
     
118. 
     
119.         });
     
120. 
     
121.     });
     
122. 
     
123. }

复制代码

可以看见，这里在组装参数, 然后运行mxconvert.js这个文件， 要找到这个文件的位置，我们要看mxconfig_1.default.getMxBinPath()这个函数的返回值。

这个方法在MxDrawCloudServer\Bin\MxDrawServer\Windows\mxconfig.js中，最终我们可用在返回值是在同目录下的ini.js中配置的:

1. function MxINI() {
   
2. 
   
3.     this.uploadPath = "./public/file/";
   
4. 
   
5.     this.mxbinPath = "../../Release/";
   
6. 
   
7.     //    ...
   
8. 
   
9. };
   
10. 
    
11. var mxIni = new MxINI();
    
12. 
    
13. module.exports = mxIni;

复制代码

如上所知, callMxNodeJS函数运行的就是这个文件MxDrawCloudServer\Bin\Release\mxconvert.js

1. // 加载梦想控件服务程序
   
2. 
   
3. var mxweb = require('./MxNode.node');
   
4. 
   
5. var Mx2D = require('./Mx2DNode.node');
   
6. 
   
7. // 加载消息处理程序
   
8. 
   
9. var mxFun = require('./mxfun');
   
10. 
    
11. 
    
12. 
    
13. try{
    
14. 
    
15.     const mxDraw_1 = require("./mxdraw/MxDraw");
    
16. 
    
17.     mxDraw_1.init(mxFun, Mx2D);
    
18. 
    
19. 
    
20. 
    
21.     var MxConvert_1 = require('./mxconvert/MxConvert');
    
22. 
    
23. 
    
24. 
    
25.     const args = process.argv.slice(2);
    
26. 
    
27. 
    
28. 
    
29.     if(args.length == 0){
    
30. 
    
31.         console.log(mxweb.getVersionInformation());
    
32. 
    
33.     }
    
34. 
    
35.     else
    
36. 
    
37.     {
    
38. 
    
39.         MxConvert_1.Call(args);
    
40. 
    
41.     }
    
42. 
    
43. }
    
44. 
    
45. catch(err)
    
46. 
    
47. {
    
48. 
    
49. console.log(err);
    
50. 
    
51. }
    
52. 
    
53. mxweb.stopAll();

复制代码

同理，在同目录下找到mxconvert/MxConvert.js

1. function saveComment(param) {
   
2. 
   
3.     let save = new SaveCommentToDWG_1.SaveCommentToDWG();
   
4. 
   
5.     return save.Do(param);
   
6. 
   
7. }
   
8. 
   
9. function Call(aryParam) {
   
10. 
    
11.     // ...
    
12. 
    
13.     aryCmd["savecomment"] = saveComment;
    
14. 
    
15.     // ...
    
16. 
    
17.     aryCmd[sCmd](cmdParam)
    
18. 
    
19.     // ...
    
20. 
    
21. }

复制代码

如上，最终我们要在aryParam参数中找到cmd字符串调用对应命令，这里的字符串就是savecomment 然后调用new SaveCommentToDWG_1.SaveCommentToDWG().DO()

我们可用在同目录下找到SaveCommentToDWG.js

1. class SaveCommentToDWG {
   
2. 
   
3.     Do(param) {
   
4. 
   
5.         if (!param.filename) {
   
6. 
   
7.             return { ret: 1 };
   
8. 
   
9.         }
   
10. 
    
11.         if (!param.savefile) {
    
12. 
    
13.             return { ret: 4 };
    
14. 
    
15.         }
    
16. 
    
17.         let curPath = Mx2DDraw.getCurrentPath();
    
18. 
    
19.         if (param.userConvertPath) {
    
20. 
    
21.             curPath = Mx2DDraw.getConvertPath();
    
22. 
    
23.         }
    
24. 
    
25.         let dwgFilePath = curPath + "/" + param.filename;
    
26. 
    
27.         // 打开dwg文件。
    
28. 
    
29.         if (!mxConvert.openFile(dwgFilePath)) {
    
30. 
    
31.             return { ret: 2 };
    
32. 
    
33.         }
    
34. 
    
35.         Mx2DDraw.makeBackgroundToCurrent();
    
36. 
    
37.         this.matDocToCad = new MxMath_1.MathMatrix4d;
    
38. 
    
39.         if (param["matDoc2Cad"]) {
    
40. 
    
41.             this.matDocToCad.fromArray(param.matDoc2Cad.elements);
    
42. 
    
43.         }
    
44. 
    
45.         let saveFilePath = curPath + "/" + param.savefile;
    
46. 
    
47.         let entitys = param["entitys"];
    
48. 
    
49.         let i = 0;
    
50. 
    
51.         for (i = 0; i < entitys.length; i++) {
    
52. 
    
53.             // 绘制对象.
    
54. 
    
55.             let ent = entitys[i];
    
56. 
    
57.             if (ent.TypeName == "MxDbLine") {
    
58. 
    
59.                 let pt1 = new Mx.McGePoint3dClass();
    
60. 
    
61.                 this.DocPt2DCoordToCAD(ent.pt1);
    
62. 
    
63.                 pt1.x = ent.pt1.x;
    
64. 
    
65.                 pt1.y = ent.pt1.y;
    
66. 
    
67.                 let pt2 = new Mx.McGePoint3dClass();
    
68. 
    
69.                 this.DocPt2DCoordToCAD(ent.pt2);
    
70. 
    
71.                 pt2.x = ent.pt2.x;
    
72. 
    
73.                 pt2.y = ent.pt2.y;
    
74. 
    
75.                 //Mx2DDraw.setColor([255, 200, 0]);
    
76. 
    
77.                 Mx2DDraw.drawLine(pt1, pt2);
    
78. 
    
79.             }
    
80. 
    
81.             else if (ent.TypeName == "MxDbLeadComment") {
    
82. 
    
83.                 this.DrawMxDbLeadComment(ent, this);
    
84. 
    
85.             }
    
86. 
    
87.             else if (ent.TypeName == "MxDbAnyLine") {
    
88. 
    
89.                 MxDbAnyLine_1.DrawMxDbAnyline(ent, this);
    
90. 
    
91.             }
    
92. 
    
93.             else if (ent.TypeName == "MxDbSplineCurve") {
    
94. 
    
95.                 MxDbSplineCurve_1.DrawMxDbSplineCurve(ent, this);
    
96. 
    
97.             }
    
98. 
    
99.             else if (ent.TypeName == "MxDbCloudLine") {
    
100. 
     
101.                 MxDbCloudLine_1.DrawMxDbCloudLine(ent, this);
     
102. 
     
103.             }
     
104. 
     
105.             else if (ent.TypeName == "MxDbRectBoxLeadComment") {
     
106. 
     
107.                 MxDbRectBoxLeadComment_1.DrawMxDbRectBoxLeadComment(ent, this);
     
108. 
     
109.             }
     
110. 
     
111.             else if (ent.TypeName == "MxDbRect") {
     
112. 
     
113.                 MxDbRect_1.DrawMxDbRect(ent, this);
     
114. 
     
115.             }
     
116. 
     
117.             else if (ent.TypeName == "MxDbCircle") {
     
118. 
     
119.                 MxDbCircle_1.DrawMxDbCircle(ent, this);
     
120. 
     
121.             }
     
122. 
     
123.             else if (ent.TypeName == "MxDbEllipse") {
     
124. 
     
125.                 MxDbEllipse_1.DrawMxDbEllipse(ent, this);
     
126. 
     
127.             }
     
128. 
     
129.             else if (ent.TypeName == "MxDbText") {
     
130. 
     
131.                 MxDbText_1.DrawMxDbText(ent, this);
     
132. 
     
133.             }
     
134. 
     
135.             else if (ent.TypeName == "MxDbRegularPolygon") {
     
136. 
     
137.                 MxDbRegularPolygon_1.DrawMxDbRegularPolygon(ent, this);
     
138. 
     
139.             }
     
140. 
     
141.         }
     
142. 
     
143.         // 保存图纸
     
144. 
     
145.         if (!mxConvert.writeFile(saveFilePath)) {
     
146. 
     
147.             return { ret: 3 };
     
148. 
     
149.         }
     
150. 
     
151.         return { ret: 0 };
     
152. 
     
153.     }
     
154. 
     
155. }

复制代码

如上代码中，将各种不同的批注都绘制到图纸中, 最后将图纸保存在参数提供的savefile 中。

我们发现将这些图形绘制在图纸上是通过MxDrawCloudServer\Bin\Release\
MxNode.node和MxDrawCloudServer\Bin\Release\Mx2DNode.node提供的方法调用的, 你可以根据源码中使用方式，完善绘制更多自定义的图形到图纸中。

mxdraw实现自定义批注: 点击查看对应文档，这些批注中的getTypeName方式就是服务端得到的参数TypeName, 其他参数数据就是dwgOut返回的对应的这个图形需要的一些数据, 最终组成这样一个个的批注数据上传到服务器中。服务器根据这些批注数据, 绘制出对应图形到图纸中。

根据上文所述，我们知道了保存批注到图纸中的整个实现，可用参考代码或者直接使用这个接口。

注意：以上代码为代码片段，请自行下载MxDraw云图开发包按照上文步骤了解保存批注的整个实现流程和实现细节。