mxcad-app集成说明

前言

我们基于mxcad创建了一个在线的CAD项目，该项目中包含了预览图纸、编辑图纸、操作图纸数据库等多种CAD相关的功能。用户可以通过集成该项目到自己的系统中，使自己的系统快速升级为拥有包含CAD的专业项目，在集成项目后也可以根据自己系统本身的需求做个性化二次开发。在现有的项目中，我们提供了两种集成方式，一种是通过iframe集成mxcad项目，一种是直接在项目中集成mxcad-app插件。接下来的文章中我们将详细第二种mxcad-app的集成方式，这种方式与iframe嵌套集成相比更加便捷快速，后续维护也只需要维护当前一个系统项目，后续集成MxCAD项目我们也更加推荐使用新版的mxcad-app方式。

MxCAD项目在线地址查看：https://demo2.mxdraw3d.com:3000/mxcad/

MxCAD项目初始化界面如下：

基础集成步骤

基于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(),
      ...
  ],
});

基于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,
  },
};

高阶调用

自定义界面容器

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");

构建配置设置

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属性。
ts
```
/** 是否单线程加载wasm (默认使用多线程及加载) */
isWasmSt:true
```
第三方依赖
用户可以直接引入使用mxcad-app内部使用的mxcad和mxdraw模块，如果用户有需要使用mxcad-app内的其他依赖可以直接在mxcadAssetsPlugin方法中的libraryNames属性中添加这些外部依赖的npm库，然后直接使用。
目前支持的依赖映射的库有vue, axios, vuetify, vuetify/components, mapboxgl, pinia 你也可以访问window.MXCADAPP_EXTERNALLIBRARIES获取到所有提供的依赖库，从而不依赖与构建工具的使用。
ts
```
libraryNames: ["vue","axios"...]
```
ts
```
// 在配置文件中添加后，就可以正常使用mxcad-app中的vue模块（mxcad-app打包的内部vue模块）
import { ref } from "vue";
const n = ref(1);
```
构建打包后mxcad-app静态资源存放的子目录名。
在自己的项目中安装mxcad-app导入MxCAD项目后，构建打包的时候会默认创建名为 mxcadAppAssets 的文件夹来存放 MxCAD 相关的所有静态资源。如果用户需要修改放置静态资源的文件夹名，可以直接调用mxcadAssetsPlugin方法中的outputDir属性值。
ts
```
   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
}

核心依赖库
mxcad-app内置了mxcad 核心库，用户可以直接使用mxcad 不需要在项目中再次安装mxcad插件。如果不是模块化的方式使用,mxcad在window.MxCAD挂载你可以直接使用MxCAD访问到需要的方法和类。
ts
```
import { MxCpp } from 'mxcad'

// 获取当前mxcad对象
const mxcad = MxCpp.getCurrentMxCAD();
```
mxcad依赖mxdraw, 用户在项目中也可以直接使用mxdraw。如果不是模块化的方式使用, mxdraw 在 window.Mx 挂载。你可以直接使用Mx访问到需要的方法和类。
ts
```
import { MxFun } from 'mxdraw'

// 输出命令行内容
MxFun.acutPrintf('测试输出')
```
直接引入mxcad和mxdraw模块的前提是要使用构建工具构建。我们提供给了webpack和vite的插件, 用于支持模块化开发。
只要使用了插件就可以直接使用import引入mxcad和mxdraw模块。

MxCAD项目二次开发示例

基于上述操作，我们已经在我们的项目中集成了MxCAD项目并完成了初始化配置，接下来我们就可以直接基于该CAD项目做二次开发了，下面以在项目中实现参数化绘制多种直线为例，在我们自己的系统之实现绘制命令后注册，再在MxCAD项目调用我们的绘制直线的命令并执行对应的参数操作。

添加绘制多种直线的方法

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();
}

注册绘制命令

import { MxFun } from 'mxdraw';

MxFun.addCommand("Mx_Test_DrawLine", Mx_Test_DrawLine);

绑定调用逻辑（以点击按钮为例）

html

<button onclick="MyTestFun('Mx_Test_DrawLine')">绘制直线</button>

const MyTestFun = (str:string)=> MxFun.sendStringToExecute(str);

功能效果演示：

更多mxcad-app相关示例项目引用，可以下载我们的mxdraw云图开发包查看更多详情。

云图开发包下载链接：https://www.mxdraw.com/download.html

开始

指南

基础绘图

交互绘图

图纸编辑

数据库

最佳实践

MxCAD APP应用集成

功能示例demo

标注测量

绘图工具

编辑工具

文字工具

其他

相关文章

入门指南

CAD 功能开发

应用集成

mxcad-app集成说明

前言

基础集成步骤

基于vite集成mxcad-app

基于webpack集成mxcad-app

高阶调用

MxCAD项目二次开发示例

MxCAD APP应用集成

功能示例demo

标注测量

绘图工具

编辑工具

文字工具

其他

入门指南

CAD 功能开发

应用集成

mxcad-app集成说明 ​

前言 ​

基础集成步骤 ​

基于vite集成mxcad-app ​

基于webpack集成mxcad-app ​

高阶调用 ​

MxCAD项目二次开发示例 ​

mxcad-app集成说明

前言

基础集成步骤

基于vite集成mxcad-app

基于webpack集成mxcad-app

高阶调用

MxCAD项目二次开发示例