前言
我們基於mxcad創建了一個在線的CAD項目，該項目中包含了預覽、編輯圖紙、操作圖紙數據庫等多種CAD功能。用户集成後支持二次開發。當前我們提供了兩種集成方式，方案1：通過iframe集成mxcad項目；方案2：直接在項目中集成mxcad-app插件。
下面我們詳細講解第2種mxcad-app的集成方式，這種方式與iframe嵌套集成相比更加方便，集成後也只需要維護當前一個系統項目。
MxCAD項目初始化界面如下：
一、基礎集成步驟
1.1、基於vite集成mxcad-app
第一步，在main.js中引入mxcad項目所需要的樣式文件，創建初始MxCAD項目
// 引入mxcad-app樣式
import "mxcad-app/style";
// 引入MxCADView
import { MxCADView } from "mxcad-app";
// 創建默認mxcad項目
new MxCADView().create();第二步，在vite.config.js中加入MxCAD項目相關的資源配置
import { defineConfig } from "vite";
import { mxcadAssetsPlugin } from "mxcad-app/vite";
export default defineConfig({
plugins: [
...
mxcadAssetsPlugin(),
...
],
});1.2、基於webpack集成mxcad-app
第一步，在main.js中引入mxcad項目所需要的樣式文件，創建初始MxCAD項目
// 引入mxcad-app樣式
import "mxcad-app/style";
// 引入MxCADView
import { MxCADView } from "mxcad-app";
// 創建默認mxcad項目
new MxCADView().create();第二步，在vite.config.js中加入MxCAD項目相關的資源配置
npm install style-loader css-loaderconst { MxCadAssetsWebpackPlugin } = require("mxcad-app/webpack");
// webpack.config.js
const webpack = require("webpack");
module.exports = {
// ...
mode: "development",
module: {
rules: [
{
test: /\.css$/, // 匹配所有 .css 文件
use: [
"style-loader", // 第二步：將 CSS 代碼注入到 DOM 的 <style> 標籤中
"css-loader", // 第一步：解析 CSS 文件，處理 @import 和 url()
],
include: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules/mxcad-app")], // 可選：只處理 src 下的 css
},
],
},
plugins: [
new webpack.ContextReplacementPlugin(
/mxcad-app/, // 匹配包含 mxcad-app 的模塊路徑
path.resolve(__dirname, "src") // 限制上下文查找範圍
),
new MxCadAssetsWebpackPlugin(),
],
// ...
devServer: {
static: "./dist",
port: 3000,
},
};二、高階調用
2.1、自定義界面容器
mxcad-app如果不指定頁面的容器元素，會默認直接在項目界面創建一個寬高為100vw,100vh的容器，mxcad項目也將全屏展示。在某些情境下，我們需要動態控制mxcad項目的顯隱或顯示範圍，因此，我們設置如下相關配置來指定mxcad-app的特定界面容器。
<div id="myMxCAD" style="width: 50vw; height: 50vh"></div>// 自定義容器
import { MxCADView, mxcadApp } from "mxcad-app";
/**
* openFile：需要打開的文件路徑
* rootContainer：mxcad項目容器名
* map：是否顯示地圖模式
*/
new MxCADView({
// mxcadApp.getStaticAssetPath()).toString() 獲取mxcad-app的靜態資源路徑，默認使用的靜態資源為nodemodules/mxcad-app/dist/mxcadAppAssets
openFile: new URL("test.mxweb", mxcadApp.getStaticAssetPath()).toString(),
rootContainer: "#myMxCAD",
}).create();如果需要修改MxCAD項目內部的靜態資源路徑，可以通過調用setStaticAssetPath()方法修改。
2.2、構建配置設置
mxcad-app插件內提供了mxcadAssetsPlugin方法對MxCAD項目的加載wasm方式、第三方依賴、資源存放的子目錄名、界面UI、快捷命令、服務配置、主題樣式等進行設置，用户可以根據自己的需求在不同的場景裏修改MxCAD項目的內部配置，基於vite的配置：
import { mxcadAssetsPlugin } from "mxcad-app/vite";
// vite.config.js
export default {
plugins: [
mxcadAssetsPlugin({
isWasmSt:true,
libraryNames: ["vue"],
outputDir:'testName',
// 修改UI配置
transformMxUiConfig: (config) => {
config.title = "我的CAD"; // 修改標題
return config;
},
// 修改服務器配置
transformMxServerConfig: (config) => {
config.serverUrl = "/api/cad"; // 修改API地址
return config;
},
// 修改快捷命令(命令別名)
// transformMxQuickCommand: (config) => config
// 修改草圖與註釋UI模式的配置
// transformMxSketchesAndNotesUiConfig: (config) => config
// 修改Vuetify主題配置
// transformVuetifyThemeConfig: (config) => config
}),
],
};基於webpack的配置:
import { MxCadAssetsWebpackPlugin } from "mxcad-app/webpack";
module.exports = {
plugins: [
new MxCadAssetsWebpackPlugin({
isWasmSt:true,
libraryNames: ["vue"],
outputDir:'testName',
transformMxServerConfig: (config) => {
if (process.env.NODE_ENV === 'production') {
config.serverUrl = 'https://api.prod.com/cad';
}
return config;
}
...
})
]
};設置加載wasm方式
MxCAD項目內部默認使用多線程加載wasm資源，如果需要設置單線程加載，可以設置mxcadAssetsPlugin方法中的isWasmSt屬性。
/** 是否單線程加載wasm (默認使用多線程及加載) */
isWasmSt:true第三方依賴
用户可以直接引入使用mxcad-app內部使用的mxcad和mxdraw模塊，如果用户有需要使用mxcad-app內的其他依賴可以直接在mxcadAssetsPlugin方法中的libraryNames屬性中添加這些外部依賴的npm庫，然後直接使用。
目前支持的依賴映射的庫有vue, axios, vuetify, vuetify/components, mapboxgl, pinia 你也可以訪問window.MXCADAPP_EXTERNALLIBRARIES獲取到所有提供的依賴庫，從而不依賴與構建工具的使用。
libraryNames: ["vue","axios"...]// 在配置文件中添加後，就可以正常使用mxcad-app中的vue模塊（mxcad-app打包的內部vue模塊）
import { ref } from "vue";
const n = ref(1);構建打包後mxcad-app靜態資源存放的子目錄名
在自己的項目中安裝mxcad-app導入MxCAD項目後，構建打包的時候會默認創建名為 mxcadAppAssets 的文件夾來存放 MxCAD 相關的所有靜態資源。如果用户需要修改放置靜態資源的文件夾名，可以直接調用mxcadAssetsPlugin方法中的outputDir屬性值。
outputDir:'testName'修改界面UI、CAD快捷命令、服務配置、主題樣式等
調用mxcadAssetsPlugin方法中的提供的transform方法深度設置MxCAD項目。
// 修改UI配置
/** 更多UI配置可點擊config內部查看 */
transformMxUiConfig: (config) => {
config.title = "我的CAD"; // 修改標題
config.mTopButtonBarData.push({
"icon": "textIcon",
"prompt": "test",
"cmd": "Mx_test"
});// 添加頂部按鈕欄按鈕
...
return config;
}
// 修改草圖與註釋UI模式的配置同上
// transformMxSketchesAndNotesUiConfig: (config) => config // 修改CAD快捷命令(命令別名)
/** 更多修改CAD快捷命令配置可點擊config內部查看 */
transformMxQuickCommand: (config) => {
// 添加命令Mx_test的別名'_test'、't'
// config 為MxCAD內部命名別名數組對象
config.push(['Mx_test','_test','t'])
return config
} // 修改服務器配置
/** 更多修改服務器配置可點擊config內部查看 */
transformMxServerConfig: (config) => {
config.serverUrl = "/api/cad"; // 修改API地址
config.font.push('txt.shx', 'gdt.shx');// 添加MxCAD項目初始需要加載的字體文件
...
return config;
} // 修改Vuetify主題配置
/** 更多修改Vuetify主題配置可點擊config內部查看 */
transformVuetifyThemeConfig: (config) => {
config.defaultTheme = 'light';//dark或者light
return config
}2.3、核心依賴庫
mxcad-app內置了mxcad 核心庫，用户可以直接使用mxcad 不需要在項目中再次安裝mxcad插件。如果不是模塊化的方式使用,mxcad在window.MxCAD掛載你可以直接使用MxCAD訪問到需要的方法和類。
import { MxCpp } from 'mxcad'
// 獲取當前mxcad對象
const mxcad = MxCpp.getCurrentMxCAD();mxcad依賴mxdraw, 用户在項目中也可以直接使用mxdraw。如果不是模塊化的方式使用, mxdraw在 window.Mx掛載。你可以直接使用Mx訪問到需要的方法和類。
import { MxFun } from 'mxdraw'
// 輸出命令行內容
MxFun.acutPrintf('測試輸出')直接引入mxcad和mxdraw模塊的前提是要使用構建工具構建。我們提供給了webpack和vite的插件, 用於支持模塊化開發,只要使用了插件就可以直接使用import引入mxcad和mxdraw模塊。
三、MxCAD項目二次開發示例
基於上述操作，我們已經在我們的項目中集成了MxCAD項目並完成了初始化配置，接下來我們就可以直接基於該CAD項目做二次開發了，下面以在項目中實現參數化繪製多種直線為例，在我們自己的系統之實現繪製命令後註冊，再在MxCAD項目調用我們的繪製直線的命令並執行對應的參數操作。
3.1、添加繪製多種直線的方法
import { MxCpp, McCmColor } from "mxcad";
function Mx_Test_DrawLine() {
let mxcad = MxCpp.getCurrentMxCAD();
//清空當前顯示內容
mxcad.newFile();
//把顏色改回黑白色
mxcad.drawColorIndex = 0;
//把線型改成實線
mxcad.drawLinetype = "";
//設置線寬 4
mxcad.drawLineWidth = 0;
//創建一個圖層,名為"LineLayer"
mxcad.addLayer("LineLayer");
//設置當前圖層為"LineLayer"
mxcad.drawLayer = "LineLayer";
// 直接繪製一個實線
// 參數一直線的開始點x座標，參數二直線的開始點y座標，參數三直線的結束點x座標，參數四直線的結束點y座標
mxcad.drawLine(0, 0, 100, 0);
// 繪製一個實斜線
mxcad.drawLine(200, 0, 300, 100);
//----------------------------------------------------------------------------------------------------------
//繪製一個虛線
//定義虛線數據據,"MyLineType"是線型名，"6,-8"是虛線的一個單位定義，6是實線長，-8是空格長。
mxcad.addLinetype("MyLineType", "6,-10");
//設計當前線型為"MyLineType"
mxcad.drawLinetype = "MyLineType";
// 繪製一個虛線
mxcad.drawLine(0, 30, 100, 30);
// 繪製一個斜虛線
mxcad.drawLine(200, 30, 300, 130);
//---------------------------------------------------------------------------------------------------------
// 修改繪線的顏色為 16711680(藍色), 16711680轉成16進制是0xFF 00 00,其中，FF是藍色，00是綠色，第個二00是紅色。
mxcad.drawColor = new McCmColor(0, 0, 255);
// 繪製一個藍色的虛線
mxcad.drawLine(0, 60, 100, 60);
// 繪製一個藍色的斜虛線
mxcad.drawLine(200, 60, 300, 160);
//---------------------------------------------------------------------------------------------------------
//把顏色改回黑白色
mxcad.drawColorIndex = 0;
//把線型改成實線
mxcad.drawLinetype = "";
//設置線寬 4
mxcad.drawLineWidth = 4;
//繪製一個帶寬度的直線。
mxcad.drawLine(0, 90, 100, 90);
// 繪製一個帶寬度的斜線
mxcad.drawLine(200, 90, 300, 190);
//---------------------------------------------------------------------------------------------------------
//繪製一個點劃線虛線
mxcad.addLinetype("MyLineType2", "10,-2,3,-2");
//把線型改點劃線
mxcad.drawLinetype = "MyLineType2";
// 修改繪線的顏色為 255(紅色), 255轉成16進制是0x00 00 FF,其中，00是藍色，第個二00是綠色，FF是紅色。
mxcad.drawColor = new McCmColor(255, 0, 0);
//繪製一個帶寬度的紅色點劃線。
mxcad.drawLine(0, 120, 100, 120);
// 繪製一個帶寬度紅色點劃斜線
mxcad.drawLine(200, 120, 300, 220);
//---------------------------------------------------------------------------------------------------------
//增加一個帶有形的線型
mxcad.addTextStyle("MyLineTypeTextStyle", "txt.shx", "hztxt.shx", 1);
mxcad.addLinetypeEx("MyLineType3", "(12.7,(\"T=MxDraw\",\"S=2.54\",\"L=-5.08\",\"R=0.0\",\"X=-2.54\",\"Y=-1.27\"),-10.08)", "MyLineTypeTextStyle");
mxcad.drawLinetype = "MyLineType3";
mxcad.drawLineWidth = 0;
//繪製一個帶寬度的紅色點劃線。
mxcad.drawLine(350, 120, 600, 120);
//---------------------------------------------------------------------------------------------------------
//增加一個帶有形的線型
//把顏色改回黑白色
mxcad.drawColorIndex = 0;
mxcad.drawLineWidth = 4;
//繪製一個帶寬度的紅色點劃線。
mxcad.drawLine(350, 220, 600, 220);
//把所有的實體都放到當前顯示視區
mxcad.zoomAll();
//更新視區顯示
mxcad.updateDisplay();
}3.2、註冊繪製命令
import { MxFun } from 'mxdraw';
MxFun.addCommand("Mx_Test_DrawLine", Mx_Test_DrawLine);3.3、綁定調用邏輯（以點擊按鈕為例）
<button onclick="MyTestFun('Mx_Test_DrawLine')">繪製直線</button> const MyTestFun = (str:string)=> MxFun.sendStringToExecute(str);3.4、功能效果演示：
更多mxcad-app相關示例項目引用，可以下載我們的mxdraw雲圖開發包查看更多詳情。
