前言
梦想云图开发包，支持所有DWG/CAD图纸的在线浏览、批注、坐标提取、对象选择、编辑等功能，下面讲解如何从零开始使用梦想云图开发包。
开发包下载：
点击 www.mxdraw.com/download.ht…下载开发包，界面如下图所示：
安装开发包
首先退出杀毒软件，双击安装包MxDrawCloudServer1.0(20220127)TryVersion.exe开始安装，里面包含所有例子、帮助、demo工程，所以安装比较慢，请耐心等待。
安装完成
桌面图标： ，启动开始程序，界面如下：
按照提示启动demo，查看demo运行效果。
详细内容，可以参考：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文件格式，代码如下：
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工程
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的静态文件加载功能
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. 该文章完整例子代码下载：
mxtmpweb.mxdraw.f3322.net:3562/mxdraw-test…
\
