WebCAD快速入門（在線CAD如何快速搭建和入門）網頁瀏覽和編輯dwg

介

提示:目前提供兩種在網頁中瀏覽編輯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/

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圖紙做格式轉換。

調用命令:

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程序調用代碼：https://demo.mxdraw3d.com:3562/MxFileConvert.java.7z

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工程

詳細見：https://help.mxdraw.com/?pid=107

B.安裝mxdraw npm插件

yarn add mxdraw 或 npm install mxdraw

C. 修改main.ts加載，初始化MxDraw插件

import { loadCoreCode } from "mxdraw"loadCoreCode()

如下圖：

常生產生活中，我們會經常讀到或使用各種類型的圖表。圓環（圓弧）便是一種較常見的類型，用于直觀展現某一數據指標占整體的比例。本文以 HTML Canvas 的實現為主（當然，SVG 黨可以在了解原理后自行實現），逐層介紹圓環圖表開發的一些主要思路和原理。

圖1 所示是一些我們平時比較常見的一些圓環（圓弧）效果。雖然圖形的主體構成都是圓弧，但不同效果在信息傳達的功能上卻略有差異。如：

閉合的圓環可以表示流程 “進度” 的概念
非閉合圓環一般用于狀態量（標量）的展示，一般也稱為 “儀表盤” 效果
不同的色相可用于標識狀態量的狀態區間（如：低危-中危-高危區間的標識可以使用三種顏色的構成的過渡效果進行表達）

為了更加方便、完善地解決我們在業務開發時的具體需要，可以對這些風格、樣式進行一定分析、抽象，總結出一個通用組件需要具備的能力，如：

顏色、漸變可配（支持傳入單一色值或顏色序列）
圓弧寬度可調（內、外半徑大小可配置）
圓弧夾角可調（開始角度、截止角度可配置）
圓弧端點造型可選（可切換平角/半圓造型
文案效果可調（字號、字體、顏色等）

下面，我們著手于實現這樣一個功能全面、業務通用性較強的圓環組件。

1. 圓環的造型

繪制圓環造型的第一步，需要先繪制圓環圖表構成要素，即一段一段的圓弧。而對于像下圖中這樣的兩種倒角效果（黃色部分圓弧兩端的樣式），既可以是直角，也可以是半圓。

因此，我們需要實現一個通用的方法來繪制圓弧，提供兩種倒角風格給用戶。

1.1 前景圓弧的繪制

圓弧繪制的思路如上圖所示，按先后順序大致分為幾個步驟：

（1）繪制圓弧起始端的半圓輪廓
（2）繪制圓弧的外邊緣輪廓
（3）繪制圓弧終止端的半圓輪廓
（4）繪制圓弧的內邊緣輪廓
（5）閉合輪廓并填充色彩

注：由于 canvas 繪制圓弧的方法默認是順時針方向，因而我們的繪圖步驟也是沿著順時針方向

以下是一些姿勢要領：

1.1.1 端點坐標的計算

在繪制端點半圓之前我們需要端點的位置坐標，以其實端為例，根據圓環的半徑（內外徑的均值，即圓弧中線的半徑）和起始端點的角度如何計算圓上一點的坐標：

// 計算圓弧上某點的坐標
// originX, originY - 圓心的坐標
// radius - 圓環半徑，等于圓環內、外徑的平均值，也即圓弧中線的半徑
// alpha - 弧度
function calcPosition(originX, originY, radius, alpha) {
  return [
    radius * Math.cos(alpha) + originX,
    radius * Math.sin(alpha) + originY,
  ];
}

1.1.2 端點半圓的起止角度

在 canvas 中繪制一個 arc，需要知道其起始角度和終止角度。由于 canvas 繪制默認方向為屏幕順時針方向（屏幕 Z軸的左手螺旋方向），從上面的示意圖中可以看出：

起始端半圓弧度范圍 - [radianStart - Math.PI, radianStart]
終止端半圓弧度范圍 - [radianEnd, radianEnd + Math.PI]

1.1.3 繪制半圓

有了端點坐標和起止角度，便可以繪制端點的半圓：

// 以起始端的半圓倒角為例
myCanvas.context.arc(
  x,
  y,
  (radiusOutter - radiusInner) / 2,     // 小圓半徑，等于圓環線寬的一半
  radianStart - Math.PI,
  radianStart
);

直角倒角風格的繪制與半圓倒角圓弧的繪制步驟基本相同，主要差別在于不用繪制圓弧兩個端點的小半圓，改成繪制直線。背景圓弧的繪制也與前景圓弧方法一致。

2. Canvas 實現錐形漸變

上面的步驟可以繪制出圓弧的輪廓，要達到圖1 那樣的視覺效果，我們需要給前面繪制出來的輪廓填充圖像。

沿著圓周方向的漸變，因為其圖像形似圓錐體的俯瞰效果，俗稱錐形漸變：

眾所周知，CSS 中有一個名為 conic-gradient 的屬性直接支持錐形漸變，而 HTML Canvas 的原生 API 目前還沒有類似的能力。那么，我們如何在 canvas 中繪制出這樣的圖像呢？

下面我們講下大致的原理：

（1）對用戶傳入的顏色進行插值，得到一個顏色序列。

這里，我們直接使用 canvas 原生的 createLinearGradient 方法，在離屏 canvas 中繪制一個 1px 的線性漸變效果，圖像寬度正好是我們要插值的數量，漸變插值的結果也就是 canvas 上對應像素位置的色值。

顏色插值（漸變取色）代碼實現如下：

// 用于實現顏色插值的工具類
export default class ColorInterpolate {
  // 參數01: stops - 為要插值的顏色序列，數據格式形如：[[0, 'red'], [0.5, 'green'], [1.0, 'yellow']]
  // 參數02: segment - 插值段落數，即插值結果的顏色值的數量
  constructor(stops = [], segment = 100) {
    // 構建離屏 canvas
    const canvas = document.createElement('canvas');
    canvas.width = segment;
    canvas.height = 1;
    this.ctx = canvas.getContext('2d');

    // 繪制線性漸變
    const gradient = this.ctx.createLinearGradient(0, 0, segment, 0);
    for (let [offset, color] of stops) {
      gradient.addColorStop(offset, color);
    }

    this.ctx.fillStyle = gradient;
    this.ctx.fillRect(0, 0, segment, 1);
  }

  // 根據位置偏移量獲取插值后的色值
  getColor(offset) {
    const imgData = this.ctx.getImageData(offset, 0, 1, 1);
    return `rgba(${imgData.data.slice(0, 3).join(',')}, ${imgData.data[3] / 255})`;
  }
}

（2）如下圖所示，我們可以把漸變的圖像看成是由足夠多填充了單個色值的小 “扇面” 拼接而成。

按照這樣的思路，我們只需要遍歷上面色彩插值得到的各個顏色，然后逐個繪制小扇面，便可得到一個錐形漸變圖像。

為此我們封裝了一個名為 createConicalGradient 的方法，其使用習慣與 canvas 原生的 createLinearGradient 和 createRadialGradient 方法相似。具體代碼見我的 Github（覺得有用的童鞋可以 star 一下）。

3. 過渡動畫

3.1 圓弧的過渡

在數值發生改變時，我們的圖表需要一個能夠跟隨數據改變的過渡動畫效果，對于 canvas 而言，便是清除舊圖像然后繪制新一幀圖像。這里有一些方法包裝上的技巧：

// 注：偽代碼，真實場景建議 OOP 方式包裝為工具類

let _animTick = null;
let _animFrames = null;
let _frameData = null;
let _animDiff = null;

// 動畫方法
function _animate(duration) {
  if (_animTick === null) {
    // 根據動畫時長 duration 計算整個動畫一共需要多少幀（以 60fps 計算）
    _animFrames = Math.round((duration / 1e3) * 60);

    // 相鄰兩幀動畫的數據變化
    _animDiff = _calcAnimDiff(_animFrames);

    // 動畫幀數標識
    _animTick = 0;
  }

  // 當前幀的數據值
  _frameData = _caclCurentData(_animDiff, _animTick);
  _renderFrame(_frameData);

  if (_animTick !== null && _animTick < _animFrames) {
    // 繼續執行動畫
    window.requestAnimationFrame(() => {
      _animate();
      _animTick += 1;
    });
  } else {
    // 動畫結束
    _renderFrame(_frameData);
    _animTick = null;
  }
}

// 繪制當前幀
function _renderFrame(data) {
  // ...
}

// 計算動畫相鄰幀的數據差異
function _calcAnimDiff() {
  // ...
}

// 根據兩幀數據差計算當前幀
function _caclCurentData() {
  // ...
}

3.2 兩種動畫模式

在過渡動畫執行的過程中，需要考慮兩種不同的模式：一種是漸變圖像不變化，僅是圓弧的輪廓從舊狀態變化到新狀態；一種是漸變圖像的夾角范圍跟隨輪廓的大小改變。

這兩種模式其實都有一定意義：前者可以使用不同顏色代表數值的不同狀態；后者僅僅是將漸變的顏色看成一種裝飾效果。

4. 結果演示

比較關鍵的原理都介紹完了，最后展示一下我們封裝的圖表組件的效果（右側 GUI 部分是我們自研的設計引擎的編輯效果）：

5. 寫在后面

本文是可視化圖表開發的一個小案例，。篇幅比較短，還有很多細節沒有展開討論。感興趣的童鞋歡迎交流、留言！

輯導語：在從事設計行業過程中，或許有很多關于圖標的問題困擾著設計思路。圖標往往包含很多設計因素，如何搭建一個完整的圖標體系是非常值得考慮的問題，本文作者收集關于圖標設計問題，并進行一一解答，值得閱讀學習。

從事設計很多年，是否還有很多與圖標相關的問題困擾著你。比如：我們怎么去評判一個圖標的好壞？畫一個圖標很簡單，但是繪制一組圖標時不知道該如何平衡，或是公司讓我搭建圖標體系，不知道該準備什么？…

下面是我收集到與圖標相關的問題，如果你也有相同的疑惑，那么接下來我會通過將拆解國內外的大廠的圖標體系為你解答，內含超多案例拆解！！

1. 圖標概述

在解答問題之前，我們先來看看。圖標的起源和發展是怎樣的，以及為什么需要在界面上增加圖標，它真的重要嗎？

2. 圖標定義

圖標是什么呢？

從廣義上來看具有指代意義的圖形符號都叫做圖標，圖標具有高度濃縮、快捷傳達信息且便于記憶的特性。應用的范圍也很廣，軟硬件/網頁/社交場所/公共場合無所不在。比如：男女廁所的標識/各種交通標志（禁止停車/掉頭）都是我們常見的標識。

從狹義上來看特指計算機中的標志符號，比如數據標示/命令選擇/狀態指示等，都是通過對現實世界中事物的概括和隱喻，來引導人們在計算機中進行操作。這樣說或許比較抽象，舉個

在線咨詢

上一篇：探討：微信小程序的優勢與劣勢有哪些？優缺點分析
下一篇：JavaScript 編程語言Object（對象）：基礎知識

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商