在线CAD，网页直接浏览编辑CAD(WEB CAD SDK）

MxDraw · 发表于 2020-12-21 17:25:25

本帖最后由 MxDraw 于 2023-10-7 16:19 编辑

简介
提示:目前提供两种在网页中浏览编辑CAD图纸方案，详细说明见：https://help.mxdraw.com/?pid=46
提示:MxDraw云图在线API教程：https://demo.mxdraw3d.com:3562/mxdrawcloud/index.html
提示:MxDraw云图github：https://github.com/mxcad

全新在线CAD平台，基于JavaScript、WebGL、C++、Node.js、Three.js技术，前台使用html5方式，在线处理二维、三维CAD图纸。可用于图纸管理、交流、批注、信息提取、三维展示等场景，支持dwg,dxf,dwf等文件格式，后台使用高效C++程序开发，异步多线程、多进程架构。平台前后台都提供js语言开发接口，开发人员就只需要会JS语言，就可以快速搭建自己的在线CAD绘图平台。该系统可以在Windows、Linux、Android、iOS等系统上使用，真正一份代码，全平台支持。

重要提示：使用最新的chrome浏览器，或edge浏览器访问如下网址

1）在线演示网址1：

https://www.mxdraw3d.com/sample/vuebrowse/

2）在线MxCAD

https://demo.mxdraw3d.com:3000/mxcad/

3）CAD与GIS结合演示网址，请使用chrome,或edge浏览器：

https://www.mxdraw3d.com/sample/mx-vuemap/?cmd=Mx_CADGISDemo

4）MxCAD云图:

https://www.mxdraw3d.com/

5）MxCAD云图图库：

https://www.mxdraw3d.com/drawinglibrary.html

6）MxDraw npm 包在线帮助：

https://mxcadx.gitee.io/mxdraw_docs/start/abstract.html#%E6%A6%82%E8%BF%B0

7）MxCAD npm 包在线帮助：

https://mxcadx.gitee.io/mxcad_docs/zh/

MxDraw与MxCAD区别：

MxDraw包是一个前端基于three.js的绘图平台，如果不需要编辑浏览CAD图纸，可以只使用MxDraw包用于前端绘图

MxCAD包是在MxDraw的基础上，增加了CAD功能，它相对于MxDraw更加复杂，需要CAD功能，就使用MxCAD包

主要功能

支持AutoCAD R14 到AutoCAD 2021的所有dwg图纸格式，未来也将支持新出现的AutoCAD文件格式。

三维支持：创建锥、柱、环等基本几何体, 对几何体进行布尔操作（相加、相减、相交运算)、倒角、斜切、镂空、偏移、扫视,、几何空间关系计算（法线、点积、叉积、投影、拟合等）、几何体分析（质心、体积、曲率等）、空间变换（平移、缩放、旋转）等功能。

二维支持：CAD图纸信息搜索提取、测距离、算面积、批注、捕捉、正交、曲线离散、偏移、打断、阵列、扩展数据读写、扩展记录读写、构造选择集、动画、自定义实体、组、超连接、Undo、Redo、字典、图层、标注样式、线型样式、文字样式、视口、布局、用户坐标系、系统变量、图纸比较、动态提示等。

主要实体有：直线、圆弧、Polyline、样条线、圆、椭圆、椭圆弧、IMAGE、点、块引用、外部块参照、射线、云线、文本、多行文本、对齐标注、旋转标注、半径标注、直径标注、角度标注、布局、视口、图层、线型、文字样式、命名字典、标注、自定义实体、代理实体、反应器等。

主要编辑有：移动、夹点拉伸、偏移、删除、复制、粘贴、旋转、缩放、镜向、离散、图案填充、实心填充、打碎、计算曲线长、面积、最近点、交点、导角、文字变线条等。

几何运算：面积、夹角、向量、矩阵、旋转、缩放、最近点、最近距离、垂足、参数、镜向、平移、交点、打断、延伸、最短路径、最长路径。

下载开发包

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

下载后的文件是压缩包，使用解压软件解压，建议解压位置的路径使用英文，路径不要太长

注意:开发包的内容很多，解压需要一些时间，请耐心等待！

解压目录内容如下：

运行演示

双击解压目录Mx3dServer.exe 程序，启动界面如下：

按照界面操作，点击按钮，启动服务。

注意：一定要防火墙允许我们的服务程序访问网络。

设置防火墙，允许这两个程序能访问网格：Bin\Release\node.exe和SRC\TsWeb\nodejs\node.exe，如下图：

启动后的效果如下：

1. 后台网站服务程序，如果用户有自己网站服务，可以不需要启动该程序。

2. MxDrawNodeJS服务，后台上传文件，文件格式转换的服务

3. MxCAD文件上传保存服务，CAD图纸编辑后，保存到服务器的服务

4. 前台演示效果：

5. 选择文件后：

6. 打开DWG图纸：

7. Browse模式运行效果：

8. MxCAD运行效果:

9. MxGIS运行效果：

10. Mx3D运行效果：

如何在线浏览编辑dwg文件

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

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

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

方法2：调用mxcadassembly.exe转换，软件所在目录：Bin\MxCAD\Release\mxcadassembly.exe

调用命令:

mxcadassembly.exe {'srcpath':'D:/Test/test.dwg'} 或 mxcadassembly.exe 'D:/Test/test.dwg'

后台JAVA程序如何调用mxcadassembly.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 = "Bin/MxCAD/Release/mxcadassembly.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/MxCAD/Release/mxcadassembly.exe" + '"';
// 准备调用参数，json格式，srcpath是dwg在服务器上的路径.
var param: any = {};
param.srcpath = file;
var cmd = pathConvertExt + ' "' + JSON.stringify(param) + '"';
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);
}
});
});