明经CAD社区

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 1416|回复: 2

[CAD梦想画图] 网页查看和编辑CAD,H5云图

[复制链接]
发表于 2022-6-23 14:18:33 | 显示全部楼层 |阅读模式
本帖最后由 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下载开发包,界面如下图所示:
下载后的文件是安装程序,双击按照提示安装开发包,默认安装位置在: C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer
注意:开发包的内容很多,安装需要很长时间,请耐心等待!


安装目录内容如下:





运行演示
双击桌面快捷方式:启动开始程序,界面如下:
按照界面操作,从上到下,点击三个按钮,启动服务。
注意:在启动前,关闭360杀毒软件,它会误报和拦截我们服务器程序访问网络。

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


设置防火墙,允许这两个程序能访问网格: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浏览格式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图纸做格式转换。
调用命令:
  1. MxFileConvert.exe {"srcpath":"E:/1.dwg"} 或  MxFileConvert.exe "E:/1.dwg"
复制代码
或使用nodejs调用:
  1. windows:  node.exe mxconvert.js e:/1.dwg 或 node.exe mxconvert.js convert file=e:/1.dwg
  2. linux:  ./node mxconvert.js /tmp/1.dwg 或 ./node mxconvert.js convert file=/tmp/1.dwg
复制代码
后台JAVA程序如何调用MxFileConvert.exe转换CAD文件格式,代码如下:
  1. import java.io.BufferedReader;
  2. import java.io.IOException;
  3. import java.io.InputStream;
  4. import java.io.InputStreamReader;
  5. import java.io.OutputStream;
  6. public class MyTest {
  7.     // 后面java程序,调用我们exe程序转换dwg文件格式.
  8. public static String CallMxFileConvert(String sDwgFile){
  9.         // 我们转所程序路径.
  10. String command = "C:/Users/MxDrawDEV/Documents/MxKd/MxDrawCloudServer/Bin/Release/MxFileConvert.exe";
  11. Runtime rn = Runtime.getRuntime();
  12. Process process = null;

  13.         // 转换参数。
  14. String sJsonParam = "{"srcpath":"" + sDwgFile + ""}";
  15. String [] sRetJson = new String[1];

  16. try {
  17.             // 启动一个进程序,调用转换程序。
  18. process = rn.exec(new String[]{command,sJsonParam});
  19. final InputStream ins = process.getInputStream();
  20. final InputStream errs = process.getErrorStream();
  21. //确保子进程与主进程之间inputStream不阻塞
  22. new Thread() {
  23. @Override
  24. public void run() {
  25. BufferedReader inb = null;
  26. String line = null;
  27. try {
  28. inb = new BufferedReader(new InputStreamReader(ins,"gbk"));
  29. while ((line = inb.readLine()) != null) {
  30. sRetJson[0] = line;
  31. //System.out.println("executeMxExe - InputStream : " + line);
  32. }
  33. } catch (IOException e) {
  34. e.printStackTrace();
  35. } finally {
  36. try {
  37. if(null != inb)
  38. inb.close();
  39. if(null != ins){
  40. ins.close();
  41. }
  42. } catch (IOException e) {
  43. e.printStackTrace();
  44. }
  45. }
  46. }
  47. }.start();
  48. //确保子进程与主进程之间ErrorStream不阻塞
  49. new Thread() {
  50. @Override
  51. public void run() {
  52. BufferedReader errb = null;
  53. String line = null;
  54. try {
  55. errb = new BufferedReader(new InputStreamReader(errs,"gbk"));
  56. while ((line = errb.readLine()) != null) {
  57. System.out.println("executeMxExe - ErrorStream : " + line);
  58. }
  59. } catch (IOException e) {
  60. e.printStackTrace();
  61. } finally {
  62. try {
  63. if(null!=errb)
  64. errb.close();
  65. if(null != errs){
  66. errs.close();
  67. }
  68. } catch (IOException e) {
  69. e.printStackTrace();
  70. }
  71. }
  72. }
  73. }.start();
  74. int retCode = process.waitFor();
  75. } catch (Exception e) {
  76. // TODO: handle exception
  77. e.printStackTrace();
  78. } finally{
  79. if(null !=process ){
  80. OutputStream  out = process.getOutputStream();
  81. if(null != out){
  82. try {
  83. out.close();
  84. } catch (IOException e) {
  85. // TODO Auto-generated catch block
  86. e.printStackTrace();
  87. }
  88. }
  89. process.destroy();
  90. }
  91. }

  92.         // 返回转换结果。
  93. return sRetJson[0];
  94. }

  95.     public static void main(String[] args) {   
  96.      String sDwg = "e:/1.dwg";
  97.      String sRetJson = CallMxFileConvert(sDwg);
  98.      System.out.println(sRetJson);
  99.     }
  100. };
复制代码

后台JAVA程序调用代码https://demo.mxdraw3d.com:3562/MxFileConvert.java.7z
Node.js后台调用代码如下:
  1. /* POST upload listing. */router.post('/', upload.single('file'), function (req, res, next) {   
  2.      // 得到上传文件   
  3.       var file = req.file;        
  4.      // MxFileConvert.exe在服务器的路径   
  5.       var pathConvertExt = '"' + __dirname + "/../../../Bin/Release/MxFileConvert.exe" + '"';   
  6.      // 准备调用参数,json格式,srcpath是dwg在服务器上的路径.  
  7.       var cmdparam = '{"srcpath":"' + file.path + '"}';   
  8.       var cmd = pathConvertExt + " " + cmdparam;  
  9.       const exec = child_process.exec;      
  10.      //调用MxFileConvert.exe进程,进行文件格式转换.   
  11.       exec(cmd, (err, stdout, stderr) => {      
  12.            if (err) {           
  13.               res.json('{"code": 1, "message": "exec cmd failed"}');     
  14.               }     
  15.               else {     
  16.                   // 转换成功,通过命令输出json格式字符串.      
  17.                   res.json(stdout);   
  18.               }  
  19.       });
  20.     });
复制代码

比如: D:/test/test.dwg  转换后,生成文件:  D:/test/buf/$test.dwg.xxx.wgh1,2.. 文件,如下图:
把这些生成的文件放到java的Web服务的目录下,必须前台网页可以直接下载这些文件,如下效果:
http://localhost:3000/test/buf/$test.dwg.mxb1.wgh
到目前为止,后台的工作已经准备完成。

接下来如何在前台加载CAD图纸:
A.新建一个Vue工程
详细见:https://help.mxdraw.com/?pid=107
B.安装mxdraw npm插件
yarn add mxdraw 或 npm install mxdraw
C. 修改main.ts加载,初始化MxDraw插
  1. import { loadCoreCode } from "mxdraw"
  2. loadCoreCode()
复制代码

如下图:
D. 修改HelloWorld.vue,加载MxDraw,增加canvas画布
  1. <canvas id="mxcad">
  2. </canvas>
复制代码
引用MxDraw,创建MxDraw对象
  1. import Mx from "mxdraw"
  2. @Options({
  3.   props: {
  4.     msg: String
  5.   }
  6. })
  7. export default class HelloWorld extends Vue {
  8.   msg!: string
  9.   mounted() {

  10.     // 创建MxDraw对像,打开test.dwg图纸
  11.     Mx.MxFun.createMxObject({
  12.       canvasId: "mxdraw",  // canvas元素的id
  13.             cadFile:"http://localhost:8088/demo/buf/test.dwg.mxb1.wgh", // 后端程序转换dwg文件后的文件位置。
  14.       callback(mxDrawObject,{canvas,canvasParent}) {
  15.         
  16.          mxDrawObject.addEvent("loadComplete", () => {
  17.                     console.log("mx loadComplete");
  18.                   });
  19.       }
  20.       });
  21.   }
  22. }
复制代码

如下图的修改:
E. 设置禁用Chrome浏览器的跨域访问
  1. // 如下代码,禁用跨域访问安全判断
  2. "runtimeArgs": [
  3.                 "--disable-web-security",
  4.                 "--user-data-dir=${workspaceRoot}\\UserDataDir",
  5.             ],

  6. 配置launch.json
  7. {
  8.    
  9.     "version": "0.2.0",
  10.     "configurations": [
  11.         {
  12.             "type": "chrome",
  13.             "request": "launch",
  14.             "runtimeArgs": [
  15.                 "--disable-web-security",
  16.                 "--user-data-dir=${workspaceRoot}\\UserDataDir",
  17.             ],
  18.             "name": "Launch Chrome against localhost",
  19.             "url": "http://localhost:8080",
  20.             "webRoot": "${workspaceFolder}"
  21.         }
  22.     ]
  23. }
复制代码

F. 启动运行,效果如下:

G. 该文章完整例子代码下载:
https://demo.mxdraw3d.com:3562/mxdraw-test-vue3.7z
软件安装目录下的一个更详细的demo:MxKd\MxDrawCloudServer\SRC\sample\Browse\VueBrowse,位置如下:

运行效果如下:





编辑模式原理说明
前台网页使用JS+html5开发,不需要安装任何插件,建议使用最新Chrome浏览器。CAD图形的渲染基于WebGL,使用Three.js三维开源平台。
后台使用Node.js,TS,c++语言开发,后台把DWG图纸格式解析成我们的mxweb文件格式后,传送给前台编辑。

编辑模式原理说明如下:

CAD文件转成编辑格式mxweb
1)Windows系统使用Bin\MxCAD\Release\mxcadassembly.exe转换,如下图:

2)Linux系统使用
Bin\Linux\BinMxCAD\mxcadassembly转换,也可以直接调用我们梦想云图Node.JS服务转换,详见:https://help.mxdraw.com/?pid=115中的B条说明。
3)在线编辑CAD详细教程:快速入门 | mxcad (gitee.io)



浏览模式原理说明
如果只需要浏览DWG图纸,不需要编辑CAD或是只做些简单的在线批注,就可以使用浏览模式,相对于编辑模式,浏览模式的速度更快。
把DWG图纸转换成wgh浏览格式,就可以直接在网页加载显示,原理如下图:
CAD文件转成浏览格式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.html



Liunx转换CAD文件到浏览格式
我们提供Linux版本的转换程序,在安装目录下的:Bin\Linux\Bin路径,如下图:

把该目录下的文件,拷到 Linux系统上,执行如下命令,增加文件的执行权限:
chmod -R 777 *
chmod -R 777 /mx/*


如下图所示:
然后在服务器后台程序中,调用./node mxconvert.js xxx.dwg 程序转换dwg文件格式到wgh文件,原理和Windows系统上是一样的,手动在Linux Shell下转换如下图:
转换后的文件内容:
buf目录下的内容:
也可以输入参数转换,如下:转换图纸 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-1905
Linux虚拟机建议内存:8G



Liunx转换CAD文件到编辑格式
Linux版本的转换程序,在安装目录下的:<span class="mspan">Bin\Linux\BinMxCAD</span>路径下,如下图:
把该目录下的文件,拷到 Linux系统上,执行如下命令,增加文件的执行权限
sudo chmod -R 777 ./mx/so/*
sudo  cp -r -f ./mx/locale /usr/local/share/locale

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



 楼主| 发表于 2023-7-19 14:56:10 | 显示全部楼层

谢谢支持
您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|CAD论坛|CAD教程|CAD下载|联系我们|关于明经|明经通道 ( 粤ICP备05003914号 )  
©2000-2023 明经通道 版权所有 本站代码,在未取得本站及作者授权的情况下,不得用于商业用途

GMT+8, 2024-11-28 22:04 , Processed in 0.188444 second(s), 27 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表