HarmonyOS鸿蒙Next中网页CAD二次开发修改UI配置的方法

HarmonyOS鸿蒙Next中网页CAD二次开发修改UI配置的方法 前言

我们根据 mxcad 开发包开发了一个完整的在线CAD应用，它包括了绘图、编辑、文字样式设置、图层设置、线型设置等功能的实现。我们同时提供了一个插件的开发接口，用户可以在该接口的基础上进行二次开发，这样就能够为用户减少从头开发的工作量，可以快速将一个完整的CAD项目集成到用户需要的项目中去。下面我们将介绍如何自定义设置该应用的UI配置。

Mxcad APP 应用下载

  1. 下载并解压 [Mxdraw云图开发包]到本地

  2. 找到目标 Mxcad App 项目文件夹

  • dist：MxCAD APP 在线打包后的前端资源
  • MxCAD: MxCAD APP 插件的二次开发项目(用户可在该基础上开发功能)
  • MxCADiframe: 通过 iframe 嵌入 MxCAD APP 的示例 demo
  1. MxCAD APPP 插件的二次开发项目
  • 进入 MxCAD 目录, 运行npm install安装依赖
  • 调用npm run dev命令运行 MxCAD APP在线CAD

运行效果如下：

修改界面UI配置

Mxcad App 项目文件夹下的 dist 目录是打包后的前端资源，我们可以通过修改该目录下的 mxUiConfig.json 配置文件修改项目UI设置

  1. 配置项说明如下：

title：浏览器标签页标题

headerTitle：项目名称，加上<version>自动替换成版本号

logoImg：项目logo图标，通过布尔值设置是否显示，也可以自行设置网络图片地址

mTitleButtonBarData：标题按钮栏数据，用户可在该数组下添加目标选项，其中，数组中的对象属性说明如下：

  • icon：选项图标；
  • cmd：点击该选项所执行的命令；
  • prompt：提示信息

footerRightBtnSwitchData： [“栅格”, “正交”, “极轴”,“对象捕捉”, “对象追踪”, “DYN”] 显示对应名称的按钮，空数组就不显示

mMenuBarData: list菜单列表 list中可以一直嵌套list 形成多级菜单

mRightButtonBarData、mLeftButtonBarData: isShow表示是否显示左右侧边栏

更多UI设置可参考配置文件中的配置项说明

修改界面UI样式

  1. 若用户需要修改项目界面样式，可以在 xCAD APP 项目下的 src 文件夹下新建一个css文件或scss文件，在该文件内通过目标元素的类名、属性名或者id名修改元素样式，并将该文件引入项目中运行。

修改效果如下：

  1. 若用户需要自定义页面元素，可以直接创建元素插入到目标位置，其中，该目标位置需要自己取获取，拿到它对应的元素后把你写的元素或者组件插入进去。

设置效果如下：


更多关于HarmonyOS鸿蒙Next中网页CAD二次开发修改UI配置的方法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中进行网页CAD二次开发时，修改UI配置可以通过以下步骤实现：

  1. 使用ArkUI框架：鸿蒙Next的UI开发主要基于ArkUI框架，支持声明式UI编程。通过ArkUI的组件和布局，可以灵活地调整网页CAD的UI界面。

  2. 修改布局文件：在resources/base/layout目录下找到对应的布局文件（如.hml文件），直接修改布局结构。可以通过调整组件的属性（如width、height、margin等）来改变UI的显示效果。

  3. 样式调整：在resources/base/stylesheet目录下找到样式文件（如.css文件），修改样式定义。可以通过调整颜色、字体、边框等样式属性来优化UI的外观。

  4. 动态UI更新：通过ArkUI的@State、@Prop等装饰器，实现UI的动态更新。在网页CAD中，可以根据用户操作或数据变化，动态调整UI的显示内容。

  5. 事件处理：在resources/base/script目录下找到脚本文件（如.js文件），修改事件处理逻辑。通过绑定事件处理函数，响应用户的交互操作，如点击、拖拽等。

  6. 自定义组件：如果需要更复杂的UI功能，可以创建自定义组件。在resources/base/element目录下定义新的组件，并在布局文件中引用。

  7. 调试与预览：使用DevEco Studio的预览功能，实时查看UI修改效果。通过调试工具，确保UI修改后的功能正常。

通过以上方法，可以在HarmonyOS鸿蒙Next中高效地进行网页CAD的UI配置修改。

更多关于HarmonyOS鸿蒙Next中网页CAD二次开发修改UI配置的方法的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中进行网页CAD二次开发时，修改UI配置可以通过以下步骤实现：

  1. 使用ArkUI框架：鸿蒙Next采用ArkUI作为UI开发框架，通过声明式UI语法定义界面布局和样式。

  2. 修改布局文件：在resources/base/layout目录下找到对应的XML布局文件，调整控件的位置、大小和属性。

  3. 动态更新UI：通过@State、@Prop等装饰器实现数据与UI的绑定，动态更新界面。

  4. 自定义组件：如需复杂UI，可创建自定义组件，封装特定功能。

  5. 样式调整：在resources/base/element目录下修改样式文件，调整颜色、字体等视觉元素。

通过这些方法，可以灵活地修改网页CAD的UI配置，满足二次开发需求。

回到顶部