MxDraw雲圖快速入門手冊

全新線上CAD平臺，基於 JavaScript、WebGL、C++、Node.js、Three.js技術，前臺使用 html5方式，線上處理二維、三維CAD圖紙。可用於圖紙管理、交流、批註、資訊提取、三維展示等場景，支援dwg,dxf,dwf等檔案格式，後臺使用高效C++程式開發，非同步多執行緒、多程式架構。平臺前後臺都提供js語言開發介面，開發人員就只需要會JS語言，就可以快速搭建自己的線上CAD繪圖平臺。該系統可以在Windows、Linux、Android、iOS等系統上使用，真正一份程式碼，全平臺支援。

線上演示網址1：

線上演示網址2：

CAD與GIS結合演示網址，請使用chrome,或edge瀏覽器：

MxCAD雲圖:

MxCAD雲圖相簿：

支援AutoCAD R14 到AutoCAD 2021的所有dwg圖紙格式，未來也將支援新出現的AutoCAD檔案格式。

三維支援：建立錐、柱、環等基本幾何體, 對幾何體進行布林操作（相加、相減、相交運算)、倒角、斜切、鏤空、偏移、掃視,、幾何空間關係計算（法線、點積、叉積、投影、擬合等）、幾何體分析（質心、體積、曲率等）、空間變換（平移、縮放、旋轉）等功能。

二維支援：CAD圖紙資訊搜尋提取、測距離、算面積、批註、捕捉、正交、曲線離散、偏移、打斷、陣列、擴充套件資料讀寫、擴充套件記錄讀寫、構造選擇集、動畫、自定義實體、組、超連線、Undo、Redo、字典、圖層、標註樣式、線型樣式、文字樣式、視口、佈局、使用者座標系、系統變數、圖紙比較、動態提示等。

主要實體有：直線、圓弧、Polyline、樣條線、圓、橢圓、橢圓弧、IMAGE、點、塊引用、外部塊參照、射線、雲線、文字、多行文字、對齊標註、旋轉標註、半徑標註、直徑標註、角度標註、佈局、視口、圖層、線型、文字樣式、命名字典、標註、自定義實體、代理實體、反應器等。

主要編輯有：移動、夾點拉伸、偏移、刪除、複製、貼上、旋轉、縮放、鏡向、離散、圖案填充、實心填充、打碎、計算曲線長、面積、最近點、交點、導角、文字變線條等。

幾何運算：面積、夾角、向量、矩陣、旋轉、縮放、最近點、最近距離、垂足、引數、鏡向、平移、交點、打斷、延伸、最短路徑、最長路徑。

點選  下載開發包，介面如下圖所示：

 

下載後的檔案是安裝程式，雙擊按照提示安裝開發包，預設安裝位置在：  C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer

安裝目錄內容如下：

雙擊桌面快捷方式： 啟動開始程式，介面如下：

設定防火牆，允許我們如下三個程式能訪問網格：

Bin\Release\MxServer.exe
Bin\Release\node.exe
SRC\TsWeb\nodejs\node.exe

如下圖：

啟動後的效果如下：

1、後臺網站服務程式，如果使用者有自己網站服務，可以不需要啟動該程式。

2、後臺CAD服務程式，它是後臺主服務，用於前臺的CAD資料請求響應。

3、前臺演示效果：

選擇檔案後：

開啟二維圖紙：

開啟三維圖紙：

三維繪圖測試：

線上看CAD圖紙的原理是：CAD圖紙檔案上傳到服務後臺後，呼叫我們的提供的格式轉換程式，把CAD圖紙檔案做一個格式轉換，生成新的格式檔案，然後該格式檔案傳到前臺JS載入顯示CAD圖紙。

軟體安裝目錄下： C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer\Bin\Release\MxFileConvert.exe有一個 MxFileConvert.exe程式，使用它對CAD圖紙做格式轉換。

後臺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() {@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();}}// 返回轉換結果。return sRetJson[0];}public static void main(String[] args) {String sDwg = "e:/1.dwg";String sRetJson = CallMxFileConvert(sDwg);System.out.println(sRetJson);}};

後臺JAVA程式呼叫程式碼：

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.. 檔案，如下圖：

轉換程式，生成一堆的檔案，相當於把一個比較大的DWG檔案，分成多個小的檔案，方便前臺JS程式載入顯示。

把這些生成的檔案放到java的Web服務的目錄下，必須前臺網頁可以直接下載這些檔案，如下效果：

到目前為止，後臺的工作已經準備完成。

現在我們講一下如何在前臺載入CAD圖紙：

A.新建一個Vue工程

詳細見：

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，建立 MxDraw物件

import Mx from "mxdraw"@Options({props: {msg: String}})export default class HelloWorld extends Vue {msg!: stringmounted() {// 建立MxDraw對像,開啟test.dwg圖紙Mx.MxFun.createMxObject({canvasId: "mxdraw",  // canvas元素的idcadFile:"後端程式轉換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": "{workspaceFolder}"}]}

F. 啟動執行，效果如下：

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

軟體安裝目錄下的一個更詳細的demo:MxKd\MxDrawCloudServer\SRC\sample\Browse\VueBrowse

位置如下：

執行效果如下：

前臺網頁使用JS+html5開發，不需要安裝任何外掛，建議使用最新Chrome瀏覽器。CAD圖形的渲染基於WebGL，使用Three.js三維開源平臺。

前臺與後臺通迅使用WebSocket，後臺使用Node.js，TS，c++語言開發，後臺把DWG圖紙格式解析成我們的一種檔案格式後，然後傳送給前臺顯示。

原理說明圖如下：

我們提供不需要後臺服務，直接瀏覽DWG的方案，如果使用者需求是：不需要編輯DWG圖紙，只是線上瀏覽批註DWG圖紙就比較適合此方案。

方案不需要啟動MxServer.exe，前臺轉到後臺的DWG圖紙只需要一個格式轉換後，就可以直接在網頁載入顯示，原理如下圖：

更多效果訪問網址:

我們提供Linux版本的轉換程式，該檔案在安裝目錄下的：MxDrawCloudServer\Bin\Linux\Bin目錄下，如下圖：

把該目錄下的檔案，拷到 Linux系統上，然後在伺服器後臺程式中，呼叫MxDrawServer程式轉換dwg檔案格式到wgh 檔案，原理和windows系統上是一樣的。

手動在Linux Shell下轉換如下圖：

轉換後的檔案內容：

buf目錄下的內容:

也可以json字串格式傳參，如下：轉換圖紙c10.dwg

./MxDrawServer "{'file':'c10.dwg','iszoomall': false}"

在Linux上有了wgh 檔案後，在前端載入顯示顯示DWG的步驟和windows一樣。

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

Linux虛擬機器建議記憶體：8G

CentOS系統在執行我們程式時，如果出會如下錯誤：

/lib64/libstdc++.so.6: version `GLIBCXX_3.4.26‘ not found/usr/lib64/libm.so.6: version `GLIBC_2.29' not found

參考幫助檔案:

安裝好的虛擬機器檔案下載:

CentOS密碼:mx123456