社区 › 国产CAD软件 › 网页查看和编辑CAD，H5云图

MxDraw 发表于 2022-6-23 14:18

网页查看和编辑CAD，H5云图

本帖最后由 MxDraw 于 2023-7-21 18:42 编辑

简介
提示:目前提供两种在网页中浏览编辑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等系统上使用，真正一份代码，全平台支持。
1）在线演示网址1：
https://www.mxdraw3d.com/sample/vuebrowse/
2）CAD与GIS结合演示网址，请使用chrome,或edge浏览器：
https://www.mxdraw3d.com/sample/mx-vuemap/?cmd=Mx_CADGISDemo
3）MxCAD云图:
https://www.mxdraw3d.com/
4）MxCAD云图图库：
https://www.mxdraw3d.com/drawinglibrary.html
5）MxDraw npm 包在线帮助：https://mxcadx.gitee.io/mxdraw_docs/start/abstract.html#%E6%A6%82%E8%BF%B0
6）MxCAD npm 包在线帮助：https://mxcadx.gitee.io/mxcad_docs/zh/
7）MxDraw与MxCAD区别：MxDraw包主要用来浏览CAD图纸，如果不需要编辑CAD图纸使用MxDraw包MxCAD包主是在MxDraw的基础上，增加了编辑功能，它相对于MxDraw更加复杂，如果需要在线编辑CAD图纸，就需要使用MxCAD包。



主要功能
支持AutoCAD R14 到AutoCAD 2021的所有dwg图纸格式，未来也将支持新出现的AutoCAD文件格式。三维支持：创建锥、柱、环等基本几何体, 对几何体进行布尔操作（相加、相减、相交运算)、倒角、斜切、镂空、偏移、扫视,、几何空间关系计算（法线、点积、叉积、投影、拟合等）、几何体分析（质心、体积、曲率等）、空间变换（平移、缩放、旋转）等功能。
二维支持：CAD图纸信息搜索提取、测距离、算面积、批注、捕捉、正交、曲线离散、偏移、打断、阵列、扩展数据读写、扩展记录读写、构造选择集、动画、自定义实体、组、超连接、Undo、Redo、字典、图层、标注样式、线型样式、文字样式、视口、布局、用户坐标系、系统变量、图纸比较、动态提示等。
主要实体有：直线、圆弧、Polyline、样条线、圆、椭圆、椭圆弧、IMAGE、点、块引用、外部块参照、射线、云线、文本、多行文本、对齐标注、旋转标注、半径标注、直径标注、角度标注、布局、视口、图层、线型、文字样式、命名字典、标注、自定义实体、代理实体、反应器等。
主要编辑有：移动、夹点拉伸、偏移、删除、复制、粘贴、旋转、缩放、镜向、离散、图案填充、实心填充、打碎、计算曲线长、面积、最近点、交点、导角、文字变线条等。
几何运算：面积、夹角、向量、矩阵、旋转、缩放、最近点、最近距离、垂足、参数、镜向、平移、交点、打断、延伸、最短路径、最长路径。



下载开发包
点击 http://www.mxdraw.com/download.html下载开发包，界面如下图所示：
http://admin.mxdraw3d.com/images/ueditor/1357510296918429696.png下载后的文件是安装程序，双击按照提示安装开发包，默认安装位置在： C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer注意:开发包的内容很多，安装需要很长时间，请耐心等待！

安装目录内容如下：https://admin.mxdraw3d.com/images/ueditor/1680750290879516672.png




运行演示
双击桌面快捷方式：https://help.mxdraw.com/images/editor/20201119/16057486037545347.png启动开始程序，界面如下：https://admin.mxdraw3d.com/images/ueditor/1680750710892924928.png按照界面操作，从上到下，点击三个按钮，启动服务。注意：在启动前，关闭360杀毒软件，它会误报和拦截我们服务器程序访问网络。

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

设置防火墙，允许这两个程序能访问网格：Bin\Release\node.exe和SRC\TsWeb\nodejs\node.exe，如下图：https://admin.mxdraw3d.com/images/ueditor/1681128934760124416.png启动后的效果如下：1. 后台网站服务程序，如果用户有自己网站服务，可以不需要启动该程序。https://help.mxdraw.com/images/editor/20190124/15482983247316831.png2. MxDrawNodeJS服务，后台保存文件 ，和上传文件 ，文件格式转换的服务https://admin.mxdraw3d.com/images/ueditor/1681074668645257216.png3.MxCAD文件上传保存服务，CAD图纸编辑后，保存到服务器的服务
https://admin.mxdraw3d.com/images/ueditor/1681074873734139904.png4. 前台演示效果：
https://admin.mxdraw3d.com/images/ueditor/1680751991602679808.png
https://admin.mxdraw3d.com/images/ueditor/1371417937713434624.png5. 选择文件后：https://admin.mxdraw3d.com/images/ueditor/1371418014976708608.png6. 打开DWG图纸：https://help.mxdraw.com/images/editor/20190124/15482983445150465.png7. Browse模式运行效果：
https://admin.mxdraw3d.com/images/ueditor/1681091201450774528.png8. MxCAD运行效果:
https://admin.mxdraw3d.com/images/ueditor/1680860898253737984.png9. MxGIS运行效果：
https://admin.mxdraw3d.com/images/ueditor/1680861407475798016.png
10. Mx3D运行效果：
https://admin.mxdraw3d.com/images/ueditor/1680861931625385984.png


如何在自己系统中浏览dwg文件
在线看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;

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 = 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 ){
OutputStreamout = process.getOutputStream();
if(null != out){
try {
out.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
process.destroy();
}
}

      // 返回转换结果。
return sRetJson;
}

    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.7zNode.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.. 文件，如下图：https://admin.mxdraw3d.com/images/ueditor/1496380114215243776.png把这些生成的文件放到java的Web服务的目录下，必须前台网页可以直接下载这些文件，如下效果：http://localhost:3000/test/buf/$test.dwg.mxb1.wghhttps://admin.mxdraw3d.com/images/ueditor/1496381273713807360.pnghttps://admin.mxdraw3d.com/images/ueditor/1496381309092761600.png到目前为止，后台的工作已经准备完成。
接下来如何在前台加载CAD图纸：A.新建一个Vue工程
详细见：https://help.mxdraw.com/?pid=107B.安装mxdraw npm插件
yarn add mxdraw 或 npm install mxdrawC. 修改main.ts加载，初始化MxDraw插件import { loadCoreCode } from "mxdraw"
loadCoreCode()
如下图：https://admin.mxdraw3d.com/images/ueditor/1496393055002038272.pngD. 修改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");
                  });
      }
      });
}
}
如下图的修改：
https://admin.mxdraw3d.com/images/ueditor/1526744964728492032.pngE. 设置禁用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. 启动运行，效果如下：https://admin.mxdraw3d.com/images/ueditor/1496395044393979904.png
G. 该文章完整例子代码下载：https://demo.mxdraw3d.com:3562/mxdraw-test-vue3.7z软件安装目录下的一个更详细的demo:MxKd\MxDrawCloudServer\SRC\sample\Browse\VueBrowse，位置如下：
https://admin.mxdraw3d.com/images/ueditor/1526774085017800704.png
运行效果如下：https://admin.mxdraw3d.com/images/ueditor/1526774829833916416.png




编辑模式原理说明
前台网页使用JS+html5开发，不需要安装任何插件，建议使用最新Chrome浏览器。CAD图形的渲染基于WebGL，使用Three.js三维开源平台。后台使用Node.js，TS，c++语言开发，后台把DWG图纸格式解析成我们的mxweb文件格式后，传送给前台编辑。
编辑模式原理说明如下：https://admin.mxdraw3d.com/images/ueditor/1680863512525672448.png
CAD文件转成编辑格式mxweb1）Windows系统使用Bin\MxCAD\Release\mxcadassembly.exe转换,如下图：https://admin.mxdraw3d.com/images/ueditor/1680855001297195008.png
2）Linux系统使用Bin\Linux\BinMxCAD\mxcadassembly转换，也可以直接调用我们梦想云图Node.JS服务转换，详见：https://help.mxdraw.com/?pid=115中的B条说明。
3）在线编辑CAD详细教程：快速入门 | mxcad (gitee.io)



浏览模式原理说明
如果只需要浏览DWG图纸，不需要编辑CAD或是只做些简单的在线批注,就可以使用浏览模式，相对于编辑模式，浏览模式的速度更快。把DWG图纸转换成wgh浏览格式，就可以直接在网页加载显示，原理如下图：https://admin.mxdraw3d.com/images/ueditor/1592367098196267008.jpgCAD文件转成浏览格式wgh文件Windows系统使用Bin\Release\MxFileConvert.exe转换、Linux系统使用\Bin\Linux\Bin\node mxconvert.js 转换，详细见“如何在自己系统中浏览dwg文件”章节。也可以直接调用我们梦想云图Node.JS服务转换，详细见：https://help.mxdraw.com/?pid=115%E4%B8%AD%E7%9A%84中的A条说明。
更多效果访问网址:http://www.mxdraw3d.com/drawinglibrary.htmlhttps://admin.mxdraw3d.com/images/ueditor/1371364912261107712.png


Liunx转换CAD文件到浏览格式
我们提供Linux版本的转换程序，在安装目录下的：Bin\Linux\Bin路径，如下图：https://admin.mxdraw3d.com/images/ueditor/1603645010165764096.png
把该目录下的文件，拷到 Linux系统上,执行如下命令，增加文件的执行权限：chmod -R 777 *chmod -R 777 /mx/*

如下图所示：https://admin.mxdraw3d.com/images/ueditor/1604803160399024128.png然后在服务器后台程序中，调用./node mxconvert.js xxx.dwg 程序转换dwg文件格式到wgh文件，原理和Windows系统上是一样的，手动在Linux Shell下转换如下图：https://admin.mxdraw3d.com/images/ueditor/1603645589407535104.png转换后的文件内容：https://admin.mxdraw3d.com/images/ueditor/1604806867178098688.pngbuf目录下的内容:https://admin.mxdraw3d.com/images/ueditor/1604807339758718976.png也可以输入参数转换，如下：转换图纸 1.dwg./node mxconvert.js convert file=1.dwg
在Linux上有了wgh文件后，在前端加载显示显示DWG的步骤和windows一样。文件格式转换功能，我们也提供Node.js服务接口调用，详见：https://help.mxdraw.com/?pid=115测试平台：Ubuntu 20.04.1 LTS 64, CentOS-8-x86_64-1905Linux虚拟机建议内存：8G


Liunx转换CAD文件到编辑格式
Linux版本的转换程序，在安装目录下的：<span class="mspan">Bin\Linux\BinMxCAD</span>路径下，如下图：https://admin.mxdraw3d.com/images/ueditor/1681081101080203264.png把该目录下的文件，拷到 Linux系统上，执行如下命令，增加文件的执行权限sudo chmod -R 777 ./mx/so/*sudocp -r -f ./mx/locale /usr/local/share/locale
执行命令把dwg转成mxweb格式：./mxcadassembly 1.dwg如下图：https://admin.mxdraw3d.com/images/ueditor/1681083545512185856.png

e2002 发表于 2022-6-26 18:22

业内大牛！

MxDraw 发表于 2023-7-19 14:56

e2002 发表于 2022-6-26 18:22
业内大牛！

谢谢支持{:1_1:}

查看完整版本: 网页查看和编辑CAD，H5云图