JAVA在线看CAD图纸快速入门

前言

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

在线演示网址1：

​​梦想CAD控件_CAD看图,DWG网页,安卓CAD,CAD网页,CAD控件​​

在线演示网址2：

​​embedmxcad​​

开发包下载：

点击 ​​产品下载_梦想CAD控件​​下载开发包，界面如下图所示：

安装开发包

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

安装完成

桌面图标：

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

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

详细内容，可以参考：​​MxDraw帮助

java语言后台调用

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

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

后台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);
    }
};

比如： ​​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插件

yarn add mxdraw 或 npm install mxdraw

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的静态文件加载功能
    Mx.MxFun.enablStaticLoad();
    // 静态文件加载时，静态在服务上的路径.
    Mx.MxFun.setStaticServer("http://localhost:3000/test");
    // 创建MxDraw对像,打开test.dwg图纸
    Mx.MxFun.createMxObject({
      canvasId: "mxdraw",
      drawName:"test.dwg",
      callback(mxobj,{canvas,canvasParent}) {
        return;  
      }
      });
  }
}

如下图的修改：

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://mxtmpweb.mxdraw.f3322.net:3562/mxdraw-test-vue3.7z​​