JAVA在线看CAD图纸快速入门

MxDraw

前言

梦想云图开发包，支持所有DWG/CAD图纸的在线浏览、批注、坐标提取、对象选择、编辑等功能，下面讲解如何从零开始使用梦想云图开发包。

开发包下载：
点击 http://www.mxdraw.com/download.html下载开发包，界面如下图所示：

安装开发包

2.安装开发包

首先退出杀毒软件，双击安装包MxDrawCloudServer1.0(20220127)TryVersion.exe开始安装，里面包含所有例子、帮助、demo工程，所以安装比较慢，请耐心等待。

安装完成

桌面图标： ，启动开始程序，界面如下：

按照提示启动demo，查看demo运行效果。

详细内容，可以参考：https://help.mxdraw.com/?pid=32

java语言后台调用

在线看CAD图纸的原理是：CAD图纸文件上传到服务后台后，调用我们的提供的格式转换程序，把CAD图纸文件做一个格式转换，生成新的格式文件，然后该格式文件转到前台JS加载显示CAD图纸。

软件安装目录下：C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer\Bin\Release\MxFileConvert.exe有一个MxFileConvert.exe程序，使用它对CAD图纸做格式转换。后台JAVA程序如何调用MxFileConvert.exe转换CAD文件格式，代码如下：

1. import java.io.BufferedReader;
   
2. import java.io.IOException;
   
3. import java.io.InputStream;
   
4. import java.io.InputStreamReader;
   
5. import java.io.OutputStream;
   
6. public class MyTest {
   
7.     // 后面java程序，调用我们exe程序转换dwg文件格式.
   
8. public static String CallMxFileConvert(String sDwgFile){
   
9.         // 我们转所程序路径.
   
10. String command = "C:/Users/MxDrawDEV/Documents/MxKd/MxDrawCloudServer/Bin/Release/MxFileConvert.exe";
    
11. Runtime rn = Runtime.getRuntime();
    
12. Process process = null;
    
13. 
    
14.         // 转换参数。
    
15. String sJsonParam = "{"srcpath":"" + sDwgFile + ""}";
    
16. String [] sRetJson = new String[1];
    
17. 
    
18. try {
    
19.             // 启动一个进程序，调用转换程序。
    
20. process = rn.exec(new String[]{command,sJsonParam});
    
21. final InputStream ins = process.getInputStream();
    
22. final InputStream errs = process.getErrorStream();
    
23. //确保子进程与主进程之间inputStream不阻塞
    
24. new Thread() {
    
25. @Override
    
26. public void run() {
    
27. BufferedReader inb = null;
    
28. String line = null;
    
29. try {
    
30. inb = new BufferedReader(new InputStreamReader(ins,"gbk"));
    
31. while ((line = inb.readLine()) != null) {
    
32. sRetJson[0] = line;
    
33. //System.out.println("executeMxExe - InputStream : " + line);
    
34. }
    
35. } catch (IOException e) {
    
36. e.printStackTrace();
    
37. } finally {
    
38. try {
    
39. if(null != inb)
    
40. inb.close();
    
41. if(null != ins){
    
42. ins.close();
    
43. }
    
44. } catch (IOException e) {
    
45. e.printStackTrace();
    
46. }
    
47. }
    
48. }
    
49. }.start();
    
50. //确保子进程与主进程之间ErrorStream不阻塞
    
51. new Thread() {
    
52. @Override
    
53. public void run() {
    
54. BufferedReader errb = null;
    
55. String line = null;
    
56. try {
    
57. errb = new BufferedReader(new InputStreamReader(errs,"gbk"));
    
58. while ((line = errb.readLine()) != null) {
    
59. System.out.println("executeMxExe - ErrorStream : " + line);
    
60. }
    
61. } catch (IOException e) {
    
62. e.printStackTrace();
    
63. } finally {
    
64. try {
    
65. if(null!=errb)
    
66. errb.close();
    
67. if(null != errs){
    
68. errs.close();
    
69. }
    
70. } catch (IOException e) {
    
71. e.printStackTrace();
    
72. }
    
73. }
    
74. }
    
75. }.start();
    
76. int retCode = process.waitFor();
    
77. } catch (Exception e) {
    
78. // TODO: handle exception
    
79. e.printStackTrace();
    
80. } finally{
    
81. if(null !=process ){
    
82. OutputStream  out = process.getOutputStream();
    
83. if(null != out){
    
84. try {
    
85. out.close();
    
86. } catch (IOException e) {
    
87. // TODO Auto-generated catch block
    
88. e.printStackTrace();
    
89. }
    
90. }
    
91. process.destroy();
    
92. }
    
93. }
    
94. 
    
95.         // 返回转换结果。
    
96. return sRetJson[0];
    
97. }
    
98. 
    
99.     public static void main(String[] args) {   
    
100.      String sDwg = "e:/1.dwg";
     
101.      String sRetJson = CallMxFileConvert(sDwg);
     
102.      System.out.println(sRetJson);
     
103.     }
     
104. };

复制代码

比如： D:/test/test.dwg  转换后，生成文件：  D:/test/buf/$test.dwg.xxx.wgh1,2.. 文件，如下图：

转换程序，生成一堆的文件，相当于把一个比较大的DWG文件，分成多个小的文件，方便前台JS程序加载显示。

把这些生成的文件放到java的Web服务的目录下，必须前台网页可以直接下载这些文件，如下效果：

http://localhost:3000/test/buf/$test.dwg.mxb1.wgh

到目前为止，后台的工作已经准备完成。

前台使用MxDraw插件，加载CAD图纸

A.新建一个Vue工程

详细见：help.mxdraw.com/?pid=107

B.安装mxdraw npm插件

1. yarn add mxdraw 或 npm install mxdraw

复制代码

C. 修改main.ts加载，初始化MxDraw插件

1. import { loadCoreCode } from "mxdraw"
   
2. loadCoreCode()

复制代码

如下图：

D. 修改HelloWorld.vue，加载MxDraw

增加canvas画布

1. <canvas id="mxcad">
   
2. </canvas>

复制代码

引用MxDraw，创建MxDraw对象

1. import Mx from "mxdraw"
   
2. @Options({
   
3.   props: {
   
4.     msg: String
   
5.   }
   
6. })
   
7. export default class HelloWorld extends Vue {
   
8.   msg!: string
   
9.   mounted() {
   
10.     // 启用MxDraw的静态文件加载功能
    
11.     Mx.MxFun.enablStaticLoad();
    
12.     // 静态文件加载时，静态在服务上的路径.
    
13.     Mx.MxFun.setStaticServer("http://localhost:3000/test");
    
14.     // 创建MxDraw对像,打开test.dwg图纸
    
15.     Mx.MxFun.createMxObject({
    
16.       canvasId: "mxdraw",
    
17.       drawName:"test.dwg",
    
18.       callback(mxobj,{canvas,canvasParent}) {
    
19.         return;  
    
20.       }
    
21.       });
    
22.   }
    
23. }

复制代码

如下图的修改：

E. 设置禁用Chrome浏览器的跨域访问

1. // 如下代码，禁用跨域访问安全判断
   
2. "runtimeArgs": [
   
3.                 "--disable-web-security",
   
4.                 "--user-data-dir=${workspaceRoot}\\UserDataDir",
   
5.             ],
   
6. 
   
7. 配置launch.json
   
8. {
   
9.    
   
10.     "version": "0.2.0",
    
11.     "configurations": [
    
12.         {
    
13.             "type": "chrome",
    
14.             "request": "launch",
    
15.             "runtimeArgs": [
    
16.                 "--disable-web-security",
    
17.                 "--user-data-dir=${workspaceRoot}\\UserDataDir",
    
18.             ],
    
19.             "name": "Launch Chrome against localhost",
    
20.             "url": "http://localhost:8080",
    
21.             "webRoot": "${workspaceFolder}"
    
22.         }
    
23.     ]
    
24. }

复制代码

F. 启动运行，效果如下：

G. 该文章完整例子代码下载：

https://mxtmpweb.mxdraw.f3322.net:3562/mxdraw-test-vue3.7z