在线编辑 DWG SDK 的集成方法

2025-10-13
四川
本文字数：6487 字
阅读完需：约 21 分钟

前言

我们基于 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 onclick="MyTestFun('Mx_Test_DrawLine')">绘制直线</button>

复制代码

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

复制代码

3.4、功能效果演示：

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

发布于: 刚刚阅读数: 4

WEB CAD SDK

关注

还未添加个人签名 2024-10-16 加入

还未添加个人简介

发布

暂无评论

创作场景

在线编辑 DWG SDK 的集成方法

前言

一、基础集成步骤

1.1、基于 vite 集成 mxcad-app

1.2、基于 webpack 集成 mxcad-app

二、高阶调用

2.1、自定义界面容器

2.2、构建配置设置

2.3、核心依赖库

三、MxCAD 项目二次开发示例

3.1、添加绘制多种直线的方法

3.2、注册绘制命令

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

3.4、功能效果演示：

WEB CAD SDK

评论