四川
前言
我们根据 mxcad 开发包开发了一个完整的在线CAD应用，它包括了绘图、编辑、文字样式设置、图层设置、线型设置等功能的实现。我们同时提供了一个插件的开发接口，用户可以在该接口的基础上进行二次开发，这样就能够为用户减少从头开发的工作量，可以快速将一个完整的CAD项目集成到用户需要的项目中去。下面我们将介绍如何自定义设置该应用的UI配置。
Mxcad APP 应用下载
1. 下载并解压 [Mxdraw云图开发包](https://www.mxdraw.com/download.html) 到本地
2. 找到目标 Mxcad App 项目文件夹
- dist：MxCAD APP 在线打包后的前端资源
- MxCAD: MxCAD APP 插件的二次开发项目(用户可在该基础上开发功能)
- MxCADiframe: 通过 iframe 嵌入 MxCAD APP 的示例 demo
3. MxCAD APPP 插件的二次开发项目
* 进入 MxCAD 目录, 运行`npm install`安装依赖
* 调用`npm run dev`命令运行 MxCAD APP在线CAD
运行效果如下：
修改界面UI配置
Mxcad App 项目文件夹下的 dist 目录是打包后的前端资源，我们可以通过修改该目录下的 mxUiConfig.json 配置文件修改项目UI设置
1. 配置项说明如下：
* title：浏览器标签页标题
* headerTitle：项目名称，加上自动替换成版本号
* logoImg：项目logo图标，通过布尔值设置是否显示，也可以自行设置网络图片地址
* mTitleButtonBarData：标题按钮栏数据，用户可在该数组下添加目标选项，其中，数组中的对象属性说明如下：
icon：选项图标；cmd：点击该选项所执行的命令；prompt：提示信息
* footerRightBtnSwitchData： ["栅格", "正交", "极轴","对象捕捉", "对象追踪", "DYN"] 显示对应名称的按钮，空数组就不显示
* mMenuBarData: list菜单列表 list中可以一直嵌套list 形成多级菜单
* mRightButtonBarData、mLeftButtonBarData: isShow表示是否显示左右侧边栏
更多UI设置可参考配置文件中的配置项说明
修改界面UI样式
1. 若用户需要修改项目界面样式，可以在 xCAD APP 项目下的 src 文件夹下新建一个css文件或scss文件，在该文件内通过目标元素的类名、属性名或者id名修改元素样式，并将该文件引入项目中运行。
修改效果如下：
2. 若用户需要自定义页面元素，可以直接创建元素插入到目标位置，其中，该目标位置需要自己取获取，拿到它对应的元素后把你写的元素或者组件插入进去。
设置效果如下：
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
