簡介
提示:目前提供兩種在網(wǎng)頁中瀏覽編輯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圖紙??捎糜趫D紙管理、交流、批注、信息提取、三維展示等場景,支持DWG,dxf,dwf等文件格式,后臺使用高效C 程序開發(fā),異步多線程、多進程架構(gòu)。平臺前后臺都提供js語言開發(fā)接口,開發(fā)人員就只需要會JS語言,就可以快速搭建自己的在線CAD繪圖平臺。該系統(tǒng)可以在Windows、Linux、Android、iOS等系統(tǒng)上使用,真正一份代碼,全平臺支持。
1)在線演示網(wǎng)址1:
https://www.mxdraw3d.com/sample/vuebrowse/
2)CAD與GIS結(jié)合演示網(wǎng)址,請使用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#概述
6)MxCAD npm 包在線幫助:
https://mxcadx.gitee.io/mxcad_docs/zh/
MxDraw與MxCAD區(qū)別:
MxDraw包主要用來瀏覽CAD圖紙,如果不需要編輯CAD圖紙使用MxDraw包
MxCAD包主是在MxDraw的基礎上,增加了編輯功能,它相對于MxDraw更加復雜,如果需要在線編輯CAD圖紙,就需要使用MxCAD包。
主要功能
支持AutoCAD R14 到AutoCAD 2021的所有dwg圖紙格式,未來也將支持新出現(xiàn)的AutoCAD文件格式。
三維支持:創(chuàng)建錐、柱、環(huán)等基本幾何體, 對幾何體進行布爾操作(相加、相減、相交運算)、倒角、斜切、鏤空、偏移、掃視,、幾何空間關系計算(法線、點積、叉積、投影、擬合等)、幾何體分析(質(zhì)心、體積、曲率等)、空間變換(平移、縮放、旋轉(zhuǎn))等功能。
二維支持:CAD圖紙信息搜索提取、測距離、算面積、批注、捕捉、正交、曲線離散、偏移、打斷、陣列、擴展數(shù)據(jù)讀寫、擴展記錄讀寫、構(gòu)造選擇集、動畫、自定義實體、組、超連接、Undo、Redo、字典、圖層、標注樣式、線型樣式、文字樣式、視口、布局、用戶坐標系、系統(tǒng)變量、圖紙比較、動態(tài)提示等。
主要實體有:直線、圓弧、Polyline、樣條線、圓、橢圓、橢圓弧、IMAGE、點、塊引用、外部塊參照、射線、云線、文本、多行文本、對齊標注、旋轉(zhuǎn)標注、半徑標注、直徑標注、角度標注、布局、視口、圖層、線型、文字樣式、命名字典、標注、自定義實體、代理實體、反應器等。
主要編輯有:移動、夾點拉伸、偏移、刪除、復制、粘貼、旋轉(zhuǎn)、縮放、鏡向、離散、圖案填充、實心填充、打碎、計算曲線長、面積、最近點、交點、導角、文字變線條等。
幾何運算:面積、夾角、向量、矩陣、旋轉(zhuǎn)、縮放、最近點、最近距離、垂足、參數(shù)、鏡向、平移、交點、打斷、延伸、最短路徑、最長路徑。
下載開發(fā)包
點擊 http://www.mxdraw.com/download.html下載開發(fā)包,界面如下圖所示:
下載后的文件是安裝程序,雙擊按照提示安裝開發(fā)包,默認安裝位置在: C:UsersMxDrawDocumentsMxKdMxDrawCloudServer
注意:開發(fā)包的內(nèi)容很多,安裝需要很長時間,請耐心等待!
安裝目錄內(nèi)容如下:
運行演示
雙擊桌面快捷方式:
啟動開始程序,界面如下:
按照界面操作,從上到下,點擊三個按鈕,啟動服務。
注意:在啟動前,關閉360殺毒軟件,它會誤報和攔截我們服務器程序訪問網(wǎng)絡。
注意:一定要防火墻允許我們的服務程序訪問網(wǎng)絡。
設置防火墻,允許這兩個程序能訪問網(wǎng)格:BinReleasenode.exe和SRCTsWebnodejsnode.exe,如下圖:
啟動后的效果如下:
1. 后臺網(wǎng)站服務程序,如果用戶有自己網(wǎng)站服務,可以不需要啟動該程序。
2. MxDrawnodejs服務,后臺保存文件 ,和上傳文件 ,文件格式轉(zhuǎn)換的服務
3. MxCAD文件上傳保存服務,CAD圖紙編輯后,保存到服務器的服務
4. 前臺演示效果:
5. 選擇文件后:
6. 打開dwg圖紙:
7. Browse模式運行效果:
8. MxCAD運行效果:
9. MxGIS運行效果:
10. Mx3D運行效果:
如何在自己系統(tǒng)中瀏覽dwg文件
在線看CAD圖紙的原理是:CAD圖紙文件上傳到服務后臺后,調(diào)用我們的格式轉(zhuǎn)換程序,把CAD圖紙文件轉(zhuǎn)換成我們的CAD瀏覽格式wgh文件,然后把該文件傳給前臺JS程序加載顯示CAD圖紙。
為了對大的CAD圖紙異步加載,CAD文件會轉(zhuǎn)換成多個wgh文件。
DWG文件格式轉(zhuǎn)換有兩個方法:
方法1:調(diào)用我們后面服務轉(zhuǎn)換,詳細參考:https://help.mxdraw.com/?pid=115
方法2:調(diào)用MxFileConvert.exe轉(zhuǎn)換,軟件安裝目錄下:C:UsersMxDrawDocumentsMxKdMxDrawCloudServerBinReleaseMxFileConvert.exe有一個MxFileConvert.exe程序,使用它對CAD圖紙做格式轉(zhuǎn)換。
調(diào)用命令:
MxFileConvert.exe {"srcpath":"E:/1.dwg"} 或 MxFileConvert.exe "E:/1.dwg"
或使用nodejs調(diào)用:
windows: node.exe mxconvert.js e:/1.dwg 或 node.exe mxconvert.js convert file=e:/1.dwglinux: ./node mxconvert.js /tmp/1.dwg 或 ./node mxconvert.js convert file=/tmp/1.dwg
后臺JAVA程序如何調(diào)用MxFileConvert.exe轉(zhuǎn)換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程序,調(diào)用我們exe程序轉(zhuǎn)換dwg文件格式.public static String CallMxFileConvert(String sDwgFile){ // 我們轉(zhuǎn)所程序路徑.String command = "C:/Users/MxDrawDEV/Documents/MxKd/MxDrawCloudServer/Bin/Release/MxFileConvert.exe";Runtime rn = Runtime.getRuntime();Process process = null; // 轉(zhuǎn)換參數(shù)。String sjsonParam = "{"srcpath":"" sDwgFile ""}";String [] sRetJson = new String[1]; try { // 啟動一個進程序,調(diào)用轉(zhuǎn)換程序。process = rn.exec(new String[]{command,sJsonParam});final InputStream ins = process.getInputStream();final InputStream errs = process.getErrorStream();//確保子進程與主進程之間inputStream不阻塞new Thread() {@Overridepublic 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() {@Overridepublic 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 exceptione.printStackTrace();} finally{if(null !=process ){OutputStream out = process.getOutputStream();if(null != out){try {out.close();} catch (IOException e) {// TODO Auto-generated catch blocke.printStackTrace();}}process.destroy();}} // 返回轉(zhuǎn)換結(jié)果。return sRetJson[0];} public static void main(String[] args) { String sDwg = "e:/1.dwg"; String sRetJson = CallMxFileConvert(sDwg); System.out.println(sRetJson); }};
后臺JAVA程序調(diào)用代碼:https://demo.mxdraw3d.com:3562/MxFileConvert.java.7z
Node.js后臺調(diào)用代碼如下:
/* 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" '"'; // 準備調(diào)用參數(shù),json格式,srcpath是dwg在服務器上的路徑. var cmdparam = '{"srcpath":"' file.path '"}'; var cmd = pathConvertExt " " cmdparam; const exec = child_process.exec; //調(diào)用MxFileConvert.exe進程,進行文件格式轉(zhuǎn)換. exec(cmd, (err, stdout, stderr) => { if (err) { res.json('{"code": 1, "message": "exec cmd failed"}'); } else { // 轉(zhuǎn)換成功,通過命令輸出json格式字符串. res.json(stdout); } }); });
比如: D:/test/test.dwg 轉(zhuǎn)換后,生成文件: D:/test/buf/$test.dwg.xxx.wgh1,2.. 文件,如下圖:
把這些生成的文件放到java的Web服務的目錄下,必須前臺網(wǎng)頁可以直接下載這些文件,如下效果:http://localhost:3000/test/buf/$test.dwg.mxb1.wgh
到目前為止,后臺的工作已經(jīng)準備完成。
接下來如何在前臺加載CAD圖紙:
A.新建一個Vue工程
詳細見:https://help.mxdraw.com/?pid=107
B.安裝mxdraw npm插件
yarn add mxdraw 或 npm install mxdraw
C. 修改main.ts加載,初始化MxDraw插件
import { loadCoreCode } from "mxdraw"loadCoreCode()
如下圖:
D. 修改HelloWorld.vue,加載MxDraw,增加canvas畫布
<canvas id="mxcad"></canvas>
引用MxDraw,創(chuàng)建MxDraw對象
import Mx from "mxdraw"@Options({ props: { msg: String }})export default class HelloWorld extends Vue { msg!: string mounted() { // 創(chuàng)建MxDraw對像,打開test.dwg圖紙 Mx.MxFun.createMxObject({ canvasId: "mxdraw", // canvas元素的id cadFile:"http://localhost:8088/demo/buf/test.dwg.mxb1.wgh", // 后端程序轉(zhuǎn)換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. 該文章完整例子代碼下載:
https://demo.mxdraw3d.com:3562/mxdraw-test-vue3.7z
軟件安裝目錄下的一個更詳細的demo:MxKdMxDrawCloudServerSRCsampleBrowseVueBrowse,位置如下:
運行效果如下:
編輯模式原理說明
前臺網(wǎng)頁使用JS html5開發(fā),不需要安裝任何插件,建議使用最新Chrome瀏覽器。CAD圖形的渲染基于WebGL,使用Three.js三維開源平臺。
后臺使用Node.js,TS,c 語言開發(fā),后臺把DWG圖紙格式解析成我們的mxweb文件格式后,傳送給前臺編輯,在線編輯CAD詳細教程:快速入門 :https://mxcadx.gitee.io/mxcad_docs/zh/1.指南/1.快速入門.html
編輯模式原理說明如下:
CAD文件轉(zhuǎn)成編輯格式mxweb
1)Windows系統(tǒng)使用BinMxCADReleasemxcadassembly.exe轉(zhuǎn)換;Linux系統(tǒng)使用BinLinuxBinMxCADmxcadassembly轉(zhuǎn)換,如下圖:
2)也可以直接調(diào)用我們夢想云圖Node.JS服務轉(zhuǎn)換,詳見:https://help.mxdraw.com/?pid=115中的B條說明。
瀏覽模式原理說明
如果只需要瀏覽DWG圖紙,不需要編輯CAD或是只做些簡單的在線批注,就可以使用瀏覽模式,相對于編輯模式,瀏覽模式的速度更快。
把DWG圖紙轉(zhuǎn)換成wgh瀏覽格式,就可以直接在網(wǎng)頁加載顯示,原理如下圖:
CAD文件轉(zhuǎn)成瀏覽格式wgh文件
Windows系統(tǒng)使用BinReleaseMxFileConvert.exe轉(zhuǎn)換、Linux系統(tǒng)使用BinLinuxBinnode mxconvert.js 轉(zhuǎn)換,詳細見“如何在自己系統(tǒng)中瀏覽dwg文件”章節(jié)。
也可以直接調(diào)用我們夢想云圖Node.JS服務轉(zhuǎn)換,詳細見:https://help.mxdraw.com/?pid=115中的中的A條說明。
更多效果訪問網(wǎng)址:http://www.mxdraw3d.com/drawinglibrary.html
Liunx轉(zhuǎn)換CAD文件到瀏覽格式
我們提供Linux版本的轉(zhuǎn)換程序,在安裝目錄下的:BinLinuxBin路徑,如下圖:
把該目錄下的文件,拷到 Linux系統(tǒng)上,執(zhí)行如下命令,增加文件的執(zhí)行權限:
su root
chmod -R 777 *
cp -r ./mx /mx
chmod -R 777 /mx/*
如下圖所示:
然后在服務器后臺程序中,調(diào)用./node mxconvert.js xxx.dwg 程序轉(zhuǎn)換dwg文件格式到wgh文件,原理和Windows系統(tǒng)上是一樣的,手動在Linux Shell下轉(zhuǎn)換如下圖:
轉(zhuǎn)換后的文件內(nèi)容:
buf目錄下的內(nèi)容:
也可以輸入?yún)?shù)轉(zhuǎn)換,如下:轉(zhuǎn)換圖紙 1.dwg
./node mxconvert.js convert file=1.dwg
在Linux上有了wgh文件后,在前端加載顯示顯示DWG的步驟和windows一樣。
文件格式轉(zhuǎn)換功能,我們也提供Node.js服務接口調(diào)用,詳見:https://help.mxdraw.com/?pid=115
測試平臺:Ubuntu 20.04.1 LTS 64, CentOS-8-x86_64-1905
Linux虛擬機建議內(nèi)存:8G
Liunx轉(zhuǎn)換CAD文件到編輯格式
Linux版本的轉(zhuǎn)換程序,在安裝目錄下的:<span class="mspan">BinLinuxBinMxCAD</span>路徑下,如下圖:
把該目錄下的文件,拷到 Linux系統(tǒng)上,執(zhí)行如下命令,增加文件的執(zhí)行權限
sudo chmod -R 777 mxcadassembly
sudo chmod -R 777 ./mx/so/*
sudo cp -r -f ./mx/locale /usr/local/share/locale
執(zhí)行命令把dwg轉(zhuǎn)成mxweb格式:./mxcadassembly 1.dwg
如下圖:
版權聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至 舉報,一經(jīng)查實,本站將立刻刪除。