简介

提示:目前提供两种在网页中浏览编辑CAD图纸方案,详细说明见:MxDraw帮助icon-default.png?t=N7T8https://help.mxdraw.com/?pid=46

提示:MxDraw云图在线API教程:Mx - v0.1.83Documentation for Mx - v0.1.83icon-default.png?t=N7T8https://demo.mxdraw3d.com:3562/mxdrawcloud/index.html

提示:MxDraw云图github:mxcad · GitHubmxcad has 6 repositories available. Follow their code on GitHub.icon-default.png?t=N7T8https://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:

embedmxcadicon-default.png?t=N7T8https://www.mxdraw3d.com/sample/vuebrowse/

2.在线编辑版演示网址2:

在线CAD梦想画图icon-default.png?t=N7T8https://demo.mxdraw3d.com:3000/mxcad/3.CAD与GIS结合演示网址,请使用chrome,或edge浏览器:

MxDraw云图GISicon-default.png?t=N7T8https://www.mxdraw3d.com/sample/mx-vuemap/?cmd=Mx_CADGISDemo

4.MxCAD云图:

CAD梦想画图官网_MxCAD_CAD画图_在线CAD_网页CAD_CAD看图CAD梦想画图是一款在线CAD软件,一款轻量的CAD画图软件,一款高效的CAD看图软件,支持所有天正CAD图纸格式,不需要按照任何AutoCAD软件就可拥有一个正版本的CAD软件,DWG转PDF,图纸比较,CAD图纸在线发布,微信分享CAD图纸也能轻松搞定icon-default.png?t=N7T8https://www.mxdraw3d.com/

5.MxCAD云图图库:

CAD梦想画图_DWG图库CAD梦想画图(MxCAD),支持所有版本CAD图纸的在线浏览、批注等操作,可以同时在网页,手机,电脑上跨平台使用,并实现在线CAD看图与协同icon-default.png?t=N7T8https://www.mxdraw3d.com/drawinglibrary.html

6.MxDraw npm 包在线帮助

简介 | mxdrawmxdraw是构建CAD网页在线绘图的JS库,实现在线CAD图纸预览和编辑等功能的一套解决方案icon-default.png?t=N7T8https://mxcadx.gitee.io/mxdraw_docs/start/abstract.html#%E6%A6%82%E8%BF%B0

7.MxCAD npm 包 在线帮助

mxcad | mxcad & 提供在线CAD编辑能力A VitePress siteicon-default.png?t=N7T8https://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文件格式。

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

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

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

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

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

下载开发包

网址:http://www.mxdraw.com/download.html下载,界面如下图所示:

​下载后的文件是安装程序,双击按照提示安装开发包,默认安装位置在:C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer,安装目录内容如下:

注意:开发包的内容很多,安装需要很长时间,请耐心等待!

运行演示

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

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

注意:在启动前,关闭360杀毒软件,它会误报和拦截我们服务器程序访问网络
 
注意:一定要防火墙允许我们的服务程序访问网络

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

启动后的效果如下:

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

图片5.png

(2)MxDrawNodeJS服务,后台保存文件 ,和上传文件 ,文件格式转换的服务

s1.png

(3)MxCAD文件上传保存服务,CAD图纸编辑后,保存到服务器的服务

s2.png

(4)前台演示效果:

demo.png

前台演示效果1.png

(5)选择文件后:

前台演示效果2.png

(6)打开DWG图纸:

图片8.png

(7)Browse模式运行效果:

b1.png

(8) MxCAD运行效果:

mxad.png

(9)MxGIS运行效果:

mxgis.png

(10)Mx3D运行效果:

Mx3d.png

如何在线浏览编辑dwg文件

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

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

方法1:调用我们后面服务转换,详细参考:MxDraw帮助icon-default.png?t=N7T8https://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.7zicon-default.png?t=N7T8https://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);   
              }  
      });
    });

比如: D:/test/test.dwg  转换后,生成文件:  D:/test/test.mxweb文件

把这些生成的文件放到Web服务的目录下,必须前台网页可以直接下载这些文件,像如下这样:

https://demo.mxdraw3d.com:3000/mxcad/test3.mxwebicon-default.png?t=N7T8https://demo.mxdraw3d.com:3000/mxcad/test3.mxweb

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

如何在网页中浏览CAD图纸:

A. 参考开发包解压目录sample\Browse\2d\Browse的Demo代码

B. 进入sample\Browse\2d\Browse 安装依赖包,建议使用yarn安装

yarn

C. 使用vscode打开sample\Browse\2d\Browse目录并启动服务,如下图:

s3.png

D. 浏览器访问http://localhost:8089/,效果如下:

s4.png

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. 建议打包的网页程序,使用iframe引用到实际项目工程,这个方法最简单

参考:sample\Browse\2d\Browseiframe工程,当然你也可以使用mxdraw,mxcad npm包开发

如何在网页中编辑CAD图纸:

A. 参考开发包解压目录sample\Edit\2d\MxCAD的Demo代码

B. 进入sample\Edit\2d\MxCAD 安装依赖包,建议使用yarn安装

yarn

C. 使用vscode打开sample\Edit\2d\MxCAD目录并启动服务,如下图:

s5.png

D. 浏览器访问http://localhost:3366/,效果如下:

s6.png

E. 建议打包的网页程序,使用iframe引用到实际项目工程,这个方法最简单 

参考:sample\Edit\2d\MxCADiframe工程,当然你也可以使用mxdraw,mxcad npm包开发

完整的demo代码下载

https://demo.mxdraw3d.com:3562/MxCADCode.7zicon-default.png?t=N7T8https://demo.mxdraw3d.com:3562/MxCADCode.7z

在线CAD原理说明

前台网页使用JS+html5开发,不需要安装任何插件,建议使用最新Chrome浏览器,CAD图形的渲染基于WebGL,使用Three.js三维开源平台。

后台使用Node.js,TS,c++语言开发,后台把DWG图纸格式解析成我们的mxweb文件格式后,传送给前台编辑,在线编辑CAD详细教程:快速入门 | mxcad (gitee.io),编辑模式原理说明如下:

edityl.png

CAD文件转成编辑格式mxweb

1)Windows系统使用Bin\MxCAD\Release\mxcadassembly.exe转换;Linux系统使用Bin\Linux\BinMxCAD\mxcadassembly转换,如下图:

convers.png

2)也可以直接调用我们梦想云图Node.JS服务转换,详见:MxDraw帮助中的A条说明。

Linux转换CAD文件到mxweb格式

Linux版本的转换程序,在安装目录的:Bin\Linux\BinMxCAD路径下,如下图:

linux1.png

把该目录下的文件,拷到 Linux系统上,执行如下命令,增加文件的执行权限

sudo chmod -R 777 mxcadassembly

sudo chmod -R 777 ./mx/so/*

sudo  cp -r -f ./mx/locale /usr/local/share/locale

执行命令把dwg转成mxweb格式:./mxcadassembly 1.dwg

如下图:

l2.png

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐