Question

在线看CAD图纸的原理是：CAD图纸文件上传到服务后台后，调用我们的格式转换程序，把CAD图纸文件转换成我们的CAD浏览格式wgh文件，然后把该文件传给前台JS程序加载显示CAD图纸。

为了对大的CAD图纸异步加载，CAD文件会转换成多个wgh文件。

DWG文件格式转换有两个方法：

方法1：调用我们后面服务转换，详细参考：https://help.mxdraw.com/?pid=115

方法2：调用MxFileConvert.exe转换，软件安装目录下：C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer\Bin\Release\MxFileConvert.exe有一个MxFileConvert.exe程序，使用它对CAD图纸做格式转换。

调用命令:

MxFileConvert.exe {"srcpath":"E:/1.dwg"} 或  MxFileConvert.exe "E:/1.dwg"

或使用nodejs调用:

windows:  node.exe mxconvert.js e:/1.dwg 或 node.exe mxconvert.js convert file=e:/1.dwg
linux:  ./node mxconvert.js /tmp/1.dwg 或 ./node mxconvert.js convert file=/tmp/1.dwg

后台JAVA程序如何调用MxFileConvert.exe转换CAD文件格式，代码如下：

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
public class MyTest {
    // 后面java程序，调用我们exe程序转换dwg文件格式.
public static String CallMxFileConvert(String sDwgFile){
        // 我们转所程序路径.
String command = "C:/Users/MxDrawDEV/Documents/MxKd/MxDrawCloudServer/Bin/Release/MxFileConvert.exe";
Runtime rn = Runtime.getRuntime();
Process process = null;
 
        // 转换参数。
String sJsonParam = "{\"srcpath\":\"" + sDwgFile + "\"}";
String [] sRetJson = new String[1];
 
try {
            // 启动一个进程序，调用转换程序。
process = rn.exec(new String[]{command,sJsonParam});
final InputStream ins = process.getInputStream();
final InputStream errs = process.getErrorStream();
//确保子进程与主进程之间inputStream不阻塞
new Thread() {
@Override
public void run() {
BufferedReader inb = null;
String line = null;
try {
inb = new BufferedReader(new InputStreamReader(ins,"gbk"));
while ((line = inb.readLine()) != null) {
sRetJson[0] = line;
//System.out.println("executeMxExe - InputStream : " + line);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(null != inb)
inb.close();
if(null != ins){
ins.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}.start();
//确保子进程与主进程之间ErrorStream不阻塞
new Thread() {
@Override
public void run() {
BufferedReader errb = null;
String line = null;
try {
errb = new BufferedReader(new InputStreamReader(errs,"gbk"));
while ((line = errb.readLine()) != null) {
System.out.println("executeMxExe - ErrorStream : " + line);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(null!=errb)
errb.close();
if(null != errs){
errs.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
}.start();
int retCode = process.waitFor();
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
} finally{
if(null !=process ){
OutputStream  out = process.getOutputStream();
if(null != out){
try {
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
process.destroy();
}
}
 
        // 返回转换结果。
return sRetJson[0];
}
 
    public static void main(String[] args) {   
     String sDwg = "e:/1.dwg";
     String sRetJson = CallMxFileConvert(sDwg);
     System.out.println(sRetJson);
    }
};

后台JAVA程序调用代码：https://demo.mxdraw3d.com:3562/MxFileConvert.java.7z

Node.js后台调用代码如下：

     
    /* POST upload listing. */router.post('/', upload.single('file'), function (req, res, next) {   
     // 得到上传文件   
      var file = req.file;        
     // MxFileConvert.exe在服务器的路径    
      var pathConvertExt = '"' + __dirname + "/../../../Bin/Release/MxFileConvert.exe" + '"';   
     // 准备调用参数，json格式，srcpath是dwg在服务器上的路径.  
      var cmdparam = '{"srcpath":"' + file.path + '"}';   
      var cmd = pathConvertExt + " " + cmdparam;  
      const exec = child_process.exec;       
     //调用MxFileConvert.exe进程，进行文件格式转换.   
      exec(cmd, (err, stdout, stderr) => {       
           if (err) {           
              res.json('{"code": 1, "message": "exec cmd failed"}');     
              }     
              else {     
                  // 转换成功，通过命令输出json格式字符串.       
                  res.json(stdout);   
              }  
      });
    });

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

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

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

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

接下来如何在前台加载CAD图纸：

A.新建一个Vue工程

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

B.安装mxdraw npm插件

yarn add mxdraw 或 npm install mxdraw

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

import { loadCoreCode } from "mxdraw"
loadCoreCode()

如下图：

D. 修改HelloWorld.vue，加载MxDraw，增加canvas画布

<canvas id="mxcad">
</canvas>

引用MxDraw，创建MxDraw对象

import Mx from "mxdraw"
@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  msg!: string
  mounted() {

    // 创建MxDraw对像,打开test.dwg图纸
    Mx.MxFun.createMxObject({
      canvasId: "mxdraw",  // canvas元素的id
            cadFile:"http://localhost:8088/demo/buf/test.dwg.mxb1.wgh", // 后端程序转换dwg文件后的文件位置。
      callback(mxDrawObject,{canvas,canvasParent}) {
        
         mxDrawObject.addEvent("loadComplete", () => {
                    console.log("mx loadComplete");
                  });
      }
      });
  }
}

如下图的修改：

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

// 如下代码，禁用跨域访问安全判断
 "runtimeArgs": [
                "--disable-web-security",
                "--user-data-dir=${workspaceRoot}\\UserDataDir",
            ],

配置launch.json
{
   
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "runtimeArgs": [
                "--disable-web-security",
                "--user-data-dir=${workspaceRoot}\\UserDataDir",
            ],
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

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

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

https://demo.mxdraw3d.com:3562/mxdraw-test-vue3.7z

软件安装目录下的一个更详细的demo:MxKd\MxDrawCloudServer\SRC\sample\Browse\VueBrowse，位置如下：

运行效果如下：