在线CAD平台,H5前端显示CAD,网页CAD |
您所在的位置:网站首页 › cad文件dwg › 在线CAD平台,H5前端显示CAD,网页CAD |
简介
提示:在线CAD编辑版功能测试:demo.mxdraw3d.com:3000/mxcad/ 提示:MxDraw云图在线API教程:demo.mxdraw3d.com:3562/mxdrawcloud… 提示:MxDraw云图github: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: www.mxdraw3d.com/sample/vueb… 2.CAD与GIS结合演示网址,请使用chrome,或edge浏览器: www.mxdraw3d.com/sample/mx-v… 3.MxCAD云图: www.mxdraw3d.com/ 4.MxCAD云图图库: www.mxdraw3d.com/drawinglibr… 5.MxDraw npm 包在线帮助: mxcadx.gitee.io/mxdraw_docs… 6.MxCAD npm 包在线帮助: mxcadx.gitee.io/mxcad_docs/… 7.目前提供两种在网页中浏览编辑CAD图纸方案,详细说明见:help.mxdraw.com/?pid=46 8.MxDraw与MxCAD区别: MxDraw包主要用来浏览CAD图纸,如果不需要编辑CAD图纸使用MxDraw包 MxCAD包主是在MxDraw的基础上,增加了编辑功能,它相对于MxDraw更加复杂,如果需要在线编辑CAD图纸,就需要使用MxCAD包。 主要功能支持AutoCAD R14 到AutoCAD 2024的所有dwg图纸格式,未来也将支持新出现的AutoCAD文件格式。 三维支持:创建锥、柱、环等基本几何体, 对几何体进行布尔操作(相加、相减、相交运算)、倒角、斜切、镂空、偏移、扫视,、几何空间关系计算(法线、点积、叉积、投影、拟合等)、几何体分析(质心、体积、曲率等)、空间变换(平移、缩放、旋转)等功能。 二维支持:CAD图纸信息搜索提取、测距离、算面积、批注、捕捉、正交、曲线离散、偏移、打断、阵列、扩展数据读写、扩展记录读写、构造选择集、动画、自定义实体、组、超连接、Undo、Redo、字典、图层、标注样式、线型样式、文字样式、视口、布局、用户坐标系、系统变量、图纸比较、动态提示等。 主要实体有:直线、圆弧、Polyline、样条线、圆、椭圆、椭圆弧、IMAGE、点、块引用、外部块参照、射线、云线、文本、多行文本、对齐标注、旋转标注、半径标注、直径标注、角度标注、布局、视口、图层、线型、文字样式、命名字典、标注、自定义实体、代理实体、反应器等。 主要编辑有:移动、夹点拉伸、偏移、删除、复制、粘贴、旋转、缩放、镜向、离散、图案填充、实心填充、打碎、计算曲线长、面积、最近点、交点、导角、文字变线条等。 几何运算:面积、夹角、向量、矩阵、旋转、缩放、最近点、最近距离、垂足、参数、镜向、平移、交点、打断、延伸、最短路径、最长路径。 下载开发包点击 www.mxdraw.com/download.ht…下载开发包,界面如下图所示:
下载后的文件是安装程序,双击按照提示安装开发包,默认安装位置在: C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer 注意:开发包的内容很多,安装需要很长时间,请耐心等待! 安装目录内容如下: 双击桌面快捷方式: 按照界面操作,从上到下,点击三个按钮,启动服务。 注意:在启动前,关闭360杀毒软件,它会误报和拦截我们服务器程序访问网络。 注意:一定要防火墙允许我们的服务程序访问网络。 设置防火墙,允许这两个程序能访问网格:Bin\Release\node.exe和SRC\TsWeb\nodejs\node.exe,如下图: 启动后的效果如下: 后台网站服务程序,如果用户有自己网站服务,可以不需要启动该程序。在线看CAD图纸的原理是:CAD图纸文件上传到服务后台后,调用我们的格式转换程序,把CAD图纸文件转换成我们的CAD浏览格式wgh文件,然后把该文件传给前台JS程序加载显示CAD图纸。 为了对大的CAD图纸异步加载,CAD文件会转换成多个wgh文件。 DWG文件格式转换有两个方法:方法1:调用我们后面服务转换,详细参考: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[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程序调用代码:demo.mxdraw3d.com:3562/MxFileConve… Node.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.. 文件,如下图: 把这些生成的文件放到java的Web服务的目录下,必须前台网页可以直接下载这些文件,如下效果: http://localhost:3000/test/buf/$test.dwg.mxb1.wgh 到目前为止,后台的工作已经准备完成。 接下来如何在前台加载CAD图纸:A.新建一个Vue工程 详细见:help.mxdraw.com/?pid=107 B.安装mxdraw npm插件 yarn add mxdraw 或 npm install mxdrawC. 修改main.ts加载,初始化MxDraw插件 import { loadCoreCode } from "mxdraw" loadCoreCode()如下图: D. 修改HelloWorld.vue,加载MxDraw,增加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"); }); } }); } }如下图的修改: 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. 该文章完整例子代码下载: demo.mxdraw3d.com:3562/mxdraw-test… 软件安装目录下的一个更详细的demo:MxKd\MxDrawCloudServer\SRC\sample\Browse\VueBrowse,位置如下: 运行效果如下: 前台网页使用JS+html5开发,不需要安装任何插件,建议使用最新Chrome浏览器。CAD图形的渲染基于WebGL,使用Three.js三维开源平台。 后台使用Node.js,TS,c++语言开发,后台把DWG图纸格式解析成我们的mxweb文件格式后,传送给前台编辑。 编辑模式原理说明如下:1)Windows系统使用Bin\MxCAD\Release\mxcadassembly.exe转换,如下图: 2)Linux系统使用Bin\Linux\BinMxCAD\mxcadassembly转换,也可以直接调用我们梦想云图Node.JS服务转换,详见:help.mxdraw.com/?pid=115中的B条说明。 3)在线编辑CAD详细教程:快速入门 | mxcad (gitee.io) 浏览模式原理说明如果只需要浏览DWG图纸,不需要编辑CAD或是只做些简单的在线批注,就可以使用浏览模式,相对于编辑模式,浏览模式的速度更快。 把DWG图纸转换成wgh浏览格式,就可以直接在网页加载显示,原理如下图: Windows系统使用Bin\Release\MxFileConvert.exe转换、Linux系统使用\Bin\Linux\Bin\node mxconvert.js 转换,详细见“如何在自己系统中浏览dwg文件”章节。 也可以直接调用我们梦想云图Node.JS服务转换,详细见:help.mxdraw.com/?pid=115%E4…中的A条说明。 更多效果访问网址:www.mxdraw3d.com/drawinglibr… 我们提供Linux版本的转换程序,在安装目录下的:Bin\Linux\Bin路径,如下图: 把该目录下的文件,拷到 Linux系统上,执行如下命令,增加文件的执行权限: su root chmod -R 777 * cp -r ./mx /mx 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服务接口调用,详见:help.mxdraw.com/?pid=115 测试平台: Ubuntu 20.04.1 LTS 64, CentOS-8-x86_64-1905 Linux虚拟机建议内存: 8G Liunx转换CAD文件到编辑格式Linux版本的转换程序,在安装目录下的:Bin\Linux\BinMxCAD路径下,如下图: 把该目录下的文件,拷到 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 如下图: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |