网页CAD插件快速集成的方法（非iframe嵌套）
我们基于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-loader
const { 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()` 方法修改。
import { mxcadApp } from "mxcad-app";
mxcadApp.setStaticAssetPath("https://unpkg.com/mxcad-app/dist/mxcadAppAssets");
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 >const MyTestFun = (str:string)=> MxFun.sendStringToExecute(str);3.4 、功能效果演示：
更多mxcad-app 相关示例项目引用，可以下载我们的mxdraw 云图开发包查看更多详情。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70041755/viewspace-3097670/ ，如需转载，请注明出处，否则将追究法律责任。
