簡介

提示:目前提供兩種在網(wǎng)頁中瀏覽編輯CAD圖紙方案，詳細(xì)說明見：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技術(shù)，前臺使用html5方式，在線處理二維、三維CAD圖紙?？捎糜趫D紙管理、交流、批注、信息提取、三維展示等場景，支持DWG,dxf,dwf等文件格式，后臺使用高效C 程序開發(fā)，異步多線程、多進(jìn)程架構(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的基礎(chǔ)上，增加了編輯功能，它相對于MxDraw更加復(fù)雜，如果需要在線編輯CAD圖紙，就需要使用MxCAD包。

主要功能

支持AutoCAD R14 到AutoCAD 2021的所有dwg圖紙格式，未來也將支持新出現(xiàn)的AutoCAD文件格式。

三維支持：創(chuàng)建錐、柱、環(huán)等基本幾何體, 對幾何體進(jìn)行布爾操作（相加、相減、相交運(yùn)算)、倒角、斜切、鏤空、偏移、掃視,、幾何空間關(guān)系計算（法線、點(diǎn)積、叉積、投影、擬合等）、幾何體分析（質(zhì)心、體積、曲率等）、空間變換（平移、縮放、旋轉(zhuǎn)）等功能。

二維支持：CAD圖紙信息搜索提取、測距離、算面積、批注、捕捉、正交、曲線離散、偏移、打斷、陣列、擴(kuò)展數(shù)據(jù)讀寫、擴(kuò)展記錄讀寫、構(gòu)造選擇集、動畫、自定義實體、組、超連接、Undo、Redo、字典、圖層、標(biāo)注樣式、線型樣式、文字樣式、視口、布局、用戶坐標(biāo)系、系統(tǒng)變量、圖紙比較、動態(tài)提示等。

主要實體有：直線、圓弧、Polyline、樣條線、圓、橢圓、橢圓弧、IMAGE、點(diǎn)、塊引用、外部塊參照、射線、云線、文本、多行文本、對齊標(biāo)注、旋轉(zhuǎn)標(biāo)注、半徑標(biāo)注、直徑標(biāo)注、角度標(biāo)注、布局、視口、圖層、線型、文字樣式、命名字典、標(biāo)注、自定義實體、代理實體、反應(yīng)器等。

主要編輯有：移動、夾點(diǎn)拉伸、偏移、刪除、復(fù)制、粘貼、旋轉(zhuǎn)、縮放、鏡向、離散、圖案填充、實心填充、打碎、計算曲線長、面積、最近點(diǎn)、交點(diǎn)、導(dǎo)角、文字變線條等。

幾何運(yùn)算：面積、夾角、向量、矩陣、旋轉(zhuǎn)、縮放、最近點(diǎn)、最近距離、垂足、參數(shù)、鏡向、平移、交點(diǎn)、打斷、延伸、最短路徑、最長路徑。

下載開發(fā)包

點(diǎn)擊 http://www.mxdraw.com/download.html下載開發(fā)包，界面如下圖所示：

下載后的文件是安裝程序，雙擊按照提示安裝開發(fā)包，默認(rèn)安裝位置在： C:UsersMxDrawDocumentsMxKdMxDrawCloudServer

注意:開發(fā)包的內(nèi)容很多，安裝需要很長時間，請耐心等待！

安裝目錄內(nèi)容如下：

運(yùn)行演示

雙擊桌面快捷方式：

啟動開始程序，界面如下：

按照界面操作，從上到下，點(diǎn)擊三個按鈕，啟動服務(wù)。

注意：在啟動前，關(guān)閉360殺毒軟件，它會誤報和攔截我們服務(wù)器程序訪問網(wǎng)絡(luò)。

注意：一定要防火墻允許我們的服務(wù)程序訪問網(wǎng)絡(luò)。

設(shè)置防火墻，允許這兩個程序能訪問網(wǎng)格：BinReleasenode.exe和SRCTsWebnodejsnode.exe，如下圖：

啟動后的效果如下：

1. 后臺網(wǎng)站服務(wù)程序，如果用戶有自己網(wǎng)站服務(wù)，可以不需要啟動該程序。

2. MxDrawnodejs服務(wù)，后臺保存文件 ，和上傳文件 ，文件格式轉(zhuǎn)換的服務(wù)

3. MxCAD文件上傳保存服務(wù)，CAD圖紙編輯后，保存到服務(wù)器的服務(wù)

4. 前臺演示效果：

5. 選擇文件后：

6. 打開dwg圖紙：

7. Browse模式運(yùn)行效果：

8. MxCAD運(yùn)行效果:

9. MxGIS運(yùn)行效果：

10. Mx3D運(yùn)行效果：

如何在自己系統(tǒng)中瀏覽dwg文件

在線看CAD圖紙的原理是：CAD圖紙文件上傳到服務(wù)后臺后，調(diào)用我們的格式轉(zhuǎn)換程序，把CAD圖紙文件轉(zhuǎn)換成我們的CAD瀏覽格式wgh文件，然后把該文件傳給前臺JS程序加載顯示CAD圖紙。

為了對大的CAD圖紙異步加載，CAD文件會轉(zhuǎn)換成多個wgh文件。

DWG文件格式轉(zhuǎn)換有兩個方法：

方法1：調(diào)用我們后面服務(wù)轉(zhuǎn)換，詳細(xì)參考：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 {            // 啟動一個進(jìn)程序，調(diào)用轉(zhuǎn)換程序。process = rn.exec(new String[]{command,sJsonParam});final InputStream ins = process.getInputStream();final InputStream errs = process.getErrorStream();//確保子進(jìn)程與主進(jìn)程之間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();//確保子進(jìn)程與主進(jìn)程之間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在服務(wù)器的路徑          var pathConvertExt = '"'   __dirname   "/../../../Bin/Release/MxFileConvert.exe"   '"';        // 準(zhǔn)備調(diào)用參數(shù)，json格式，srcpath是dwg在服務(wù)器上的路徑.        var cmdparam = '{"srcpath":"'   file.path   '"}';         var cmd = pathConvertExt   " "   cmdparam;        const exec = child_process.exec;            //調(diào)用MxFileConvert.exe進(jìn)程，進(jìn)行文件格式轉(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.. 文件，如下圖：

把這些生成的文件放到j(luò)ava的Web服務(wù)的目錄下，必須前臺網(wǎng)頁可以直接下載這些文件，如下效果：http://localhost:3000/test/buf/$test.dwg.mxb1.wgh

到目前為止，后臺的工作已經(jīng)準(zhǔn)備完成。

接下來如何在前臺加載CAD圖紙：

A.新建一個Vue工程

詳細(xì)見：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. 設(shè)置禁用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. 啟動運(yùn)行，效果如下：

G. 該文章完整例子代碼下載：

https://demo.mxdraw3d.com:3562/mxdraw-test-vue3.7z

軟件安裝目錄下的一個更詳細(xì)的demo:MxKdMxDrawCloudServerSRCsampleBrowseVueBrowse，位置如下：

運(yùn)行效果如下：

編輯模式原理說明

前臺網(wǎng)頁使用JS html5開發(fā)，不需要安裝任何插件，建議使用最新Chrome瀏覽器。CAD圖形的渲染基于WebGL，使用Three.js三維開源平臺。

后臺使用Node.js，TS，c 語言開發(fā)，后臺把DWG圖紙格式解析成我們的mxweb文件格式后，傳送給前臺編輯，在線編輯CAD詳細(xì)教程：快速入門 :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服務(wù)轉(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)換，詳細(xì)見“如何在自己系統(tǒng)中瀏覽dwg文件”章節(jié)。

也可以直接調(diào)用我們夢想云圖Node.JS服務(wù)轉(zhuǎn)換，詳細(xì)見：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í)行權(quán)限：

su root

chmod -R 777 *

cp -r ./mx /mx

chmod -R 777 /mx/*

如下圖所示：

然后在服務(wù)器后臺程序中，調(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服務(wù)接口調(diào)用，詳見：https://help.mxdraw.com/?pid=115

測試平臺：Ubuntu 20.04.1 LTS 64, CentOS-8-x86_64-1905

Linux虛擬機(jī)建議內(nèi)存：8G

Liunx轉(zhuǎn)換CAD文件到編輯格式

Linux版本的轉(zhuǎn)換程序，在安裝目錄下的：<span class="mspan">BinLinuxBinMxCAD</span>路徑下，如下圖：

把該目錄下的文件，拷到 Linux系統(tǒng)上，執(zhí)行如下命令，增加文件的執(zhí)行權(quán)限

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

如下圖：