JS实现编辑DWG文件快速入门

前言

我们基于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项目
newMxCADView().create();

第二步，在`vite.config.js`中加入MxCAD项目相关的资源配置

import{ defineConfig} from"vite";
import{ mxcadAssetsPlugin} from"mxcad-app/vite";
exportdefaultdefineConfig({
plugins:[
...
mxcadAssetsPlugin(),
...
],
});

1.2、基于webpack集成mxcad-app

第一步，在`main.js`中引入mxcad项目所需要的样式文件，创建初始MxCAD项目

// 引入mxcad-app样式
import"mxcad-app/style";
// 引入MxCADView
import{ MxCADView} from"mxcad-app";
// 创建默认mxcad项目
newMxCADView().create();

第二步，在`vite.config.js`中加入MxCAD项目相关的资源配

npm install style-loadercss-loader

const{ MxCadAssetsWebpackPlugin} = require("mxcad-app/webpack");
// webpack.config.js
constwebpack= require("webpack");
module.exports= {
// ...
mode:"development",
module:{
rules:[
{
test:/\.css$/, // 匹配所有 .css 文件
use:[
"style-loader", // 第二步：将 CSS 代码注入到 DOM 的