开源鸿蒙PC社区https://harmonypc.csdn.net/代码仓地址https://gitcode.com/OpenHarmonyPCDeveloper前言Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。通过将 Chromium 渲染引擎和 Node.js 运行时嵌入到二进制文件中Electron 允许开发者使用统一的 Web 技术栈创建可在 Windows、macOS、Linux 和 HarmonyOS 上运行的原生桌面应用。系统要求开发环境要求操作系统: Windows 10/11、macOS 10.15、Ubuntu 22.04IDE: DevEco Studio 5.0 鸿蒙官方 IDENode.js: 建议 v18.x 或更高版本内存: 至少 8GB RAM推荐 16GB存储空间: 至少 20GB 可用空间目标设备要求鸿蒙设备: HarmonyOS NEXT (API 20)设备类型: 平板电脑或 2in1 设备连接方式: USB Type-C 数据线重要提示: 如果需要从源码编译 Electron必须使用 Ubuntu 22.04 环境。但对于大多数开发场景直接使用预编译产物即可。鸿蒙 Electron 框架导入操作指南这里可以参考之前的文章Electron 鸿蒙pc开发环境搭建完整保姆级教程windowhttps://blog.csdn.net/m0_61243965/article/details/155104889简易绘图板项目概述简易绘图板是一个基于Electron的桌面应用为用户提供直观的绘图体验。该应用支持多种绘图工具、颜色选择和画布操作界面简洁易用同时也做了鸿蒙PC端的适配。核心功能绘图工具支持画笔、橡皮擦、直线、矩形、圆形、文本和填充工具颜色管理提供颜色选择器和快速颜色面板️笔触调整可调节线条宽度画布操作支持清空、撤销、重做和保存画布⌨️键盘快捷键常用功能支持快捷键操作状态显示实时显示鼠标位置、画布大小和当前工具深色模式自动适配系统深色/浅色主题技术架构主进程 (main.js)主进程负责应用的生命周期管理和系统集成窗口管理创建和管理应用主窗口设置窗口属性单实例控制确保应用只运行一个实例事件处理监听窗口最大化/取消最大化事件IPC通信接收渲染进程的画布保存请求应用生命周期处理应用启动、激活、关闭等事件预加载脚本 (preload.js)预加载脚本作为主进程和渲染进程之间的安全桥梁API暴露通过contextBridge向渲染进程暴露有限的API通信通道提供渲染进程与主进程通信的安全接口信息提供向渲染进程提供应用版本和系统平台信息渲染进程 (renderer.js)渲染进程负责用户界面和绘图逻辑绘图工具实现各种绘图工具的核心逻辑事件处理响应鼠标、键盘事件状态管理维护绘图历史和应用状态UI更新同步更新界面显示与应用状态文件结构07-simple-paint/ ├── main.js # 主进程代码 ├── preload.js # 预加载脚本 ├── index.html # 应用界面 ├── style.css # 样式文件 ├── renderer.js # 渲染进程代码 ├── assets/ # 资源文件包含图标等 └── README.md # 项目说明文档鸿蒙适配后结构ohos_hap/ ├── electron/ │ ├── libs/ │ │ └── arm64-v8a/ # 鸿蒙核心库文件 │ │ ├── libelectron.so │ │ ├── libadapter.so │ │ ├── libffmpeg.so │ │ └── libc_shared.so ├── web_engine/ │ └── src/ │ └── main/ │ └── resources/ │ └── resfile/ │ └── resources/ │ └── app/ # 放置electron应用代码 │ ├── main.js │ ├── preload.js │ ├── package.json │ ├── index.html │ ├── style.css │ ├── renderer.js │ └── assets/ └── module.json5 # 鸿蒙应用配置文件核心代码解析画布初始化functioninitCanvas(){// 设置画布尺寸resizeCanvas();// 初始化画布状态ctx.lineCapround;ctx.lineJoinround;ctx.lineWidthlineWidth.value;ctx.strokeStylecolorPicker.value;ctx.fillStylecolorPicker.value;// 保存初始空白画布状态saveToHistory();// 更新UI显示updateLineWidthDisplay();updateToolInfo();updateSizeInfo();// 设置事件监听器setupEventListeners();}这段代码负责画布的初始化工作包括设置初始绘图状态、保存初始历史记录和配置事件监听器。绘图工具实现以画笔工具为例casebrush:ctx.beginPath();ctx.moveTo(lastX,lastY);ctx.lineTo(x,y);ctx.stroke();lastXx;lastYy;break;不同工具通过统一的事件处理机制实现在draw()函数中根据当前选中的工具执行不同的绘图逻辑。历史记录管理// 保存到历史记录functionsaveToHistory(){// 如果当前位置不是历史记录的末尾则删除后面的记录if(historyIndexdrawingHistory.length-1){drawingHistorydrawingHistory.slice(0,historyIndex1);}// 限制历史记录数量if(drawingHistory.lengthMAX_HISTORY){drawingHistory.shift();historyIndex--;}// 保存当前画布状态constdataURLcanvas.toDataURL();drawingHistory.push(dataURL);historyIndex;// 更新按钮状态updateHistoryButtons();}// 从历史记录恢复functionrestoreFromHistory(index){if(index0||indexdrawingHistory.length)return;constimgnewImage();img.onloadfunction(){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0);};img.srcdrawingHistory[index];}历史记录功能通过保存画布的DataURL实现支持撤销和重做操作提升用户体验。键盘快捷键functionhandleKeydown(e){// Ctrl/Cmd Z 撤销if((e.ctrlKey||e.metaKey)e.keyz){e.preventDefault();undo();}// Ctrl/Cmd Y 重做if((e.ctrlKey||e.metaKey)e.keyy){e.preventDefault();redo();}// Ctrl/Cmd S 保存if((e.ctrlKey||e.metaKey)e.keys){e.preventDefault();saveCanvas();}// 数字键 1-7 快速选择工具if(e.key1e.key7){consttools[brush,eraser,line,rect,circle,text,fill];selectTool(tools[e.key-1]);}}通过键盘事件监听实现了常用功能的快捷键提高操作效率。使用指南选择工具点击工具栏中的工具按钮或使用数字键1-7选择对应工具调整颜色使用颜色选择器或快速颜色面板选择颜色调整线宽通过滑块调整线条宽度绘图操作画笔按住鼠标拖动绘制自由线条直线点击起点并拖动到终点形状点击起点并拖动确定形状大小文本点击画布位置在弹出框中输入文本填充点击区域填充颜色画布操作使用清空、撤销、重做按钮管理画布状态保存画布点击保存按钮或使用CtrlS保存当前画布性能优化历史记录限制限制最大历史记录数量防止内存占用过高事件委托高效处理UI事件样式优化使用CSS动画和过渡效果避免性能密集型操作响应式设计画布大小自适应窗口变化扩展建议添加更多绘图工具铅笔、喷枪、形状填充等实现图层功能支持多层绘图添加图片导入和编辑功能支持画布缩放和移动实现更丰富的文本格式设置添加模板功能提供预设图形模板开发说明安装依赖npminstall运行应用npmstart构建应用根据目标平台使用相应的Electron打包工具如electron-builder技术栈Electron跨平台桌面应用框架HTML5 Canvas绘图功能核心HTML/CSS/JavaScript前端开发技术Node.js后端功能支持IPC进程间通信机制鸿蒙PC适配改造指南1. 环境准备系统要求Windows 10/11、8GB RAM以上、20GB可用空间工具安装DevEco Studio 5.0安装鸿蒙SDK API 20Node.js 18.x2. 获取Electron鸿蒙编译产物登录Electron 鸿蒙官方仓库下载Electron 34版本的Release包.zip格式解压到项目目录确认electron/libs/arm64-v8a/下包含核心.so库3. 部署应用代码将Electron应用代码按指定目录结构放置web_engine/src/main/resources/resfile/resources/app/ ├── main.js ├── preload.js ├── package.json ├── index.html ├── style.css ├── renderer.js └── assets/ └── icon.png4. 配置与运行打开项目在DevEco Studio中打开ohos_hap目录配置签名进入File → Project Structure → Signing Configs自动生成调试签名或导入已有签名连接设备启用鸿蒙设备开发者模式和USB调试通过USB Type-C连接电脑编译运行点击Run按钮或按ShiftF10跨平台兼容性平台适配策略特殊处理Windows标准Electron运行无特殊配置macOS标准Electron运行保留dock图标激活逻辑Linux标准Electron运行确保系统依赖库完整鸿蒙PC通过Electron鸿蒙适配层禁用硬件加速使用特定目录结构鸿蒙开发调试技巧1. 日志查看在DevEco Studio的Log面板中过滤Electron关键词查看应用运行日志和错误信息。2. 常见问题解决SysCap不匹配错误检查module.json5中的reqSysCapabilities只保留必要系统能力找不到.so文件错误确认arm64-v8a目录下四个核心库文件完整窗口不显示在main.js中添加app.disableHardwareAcceleration()画布绘制异常确保Canvas操作在主线程执行避免跨线程操作问题总结简易绘图板项目充分展示了Electron for HarmonyOS的技术可行性开发者可以使用熟悉的HTML/CSS/JavaScript技术栈——这些技术支撑了全球数百万开发者和数十万应用——构建同时支持鸿蒙OS、Windows、macOS、Linux的原生桌面应用适配成本低。该项目为希望将Electron应用迁移至鸿蒙平台或基于Web技术栈开发鸿蒙桌面应用的开发者提供了一个完整、可复用的参考范例为鸿蒙PC桌面生态的繁荣贡献了一份实践力量。
Electron for鸿蒙PC实战项目之简易绘图板应用
开源鸿蒙PC社区https://harmonypc.csdn.net/代码仓地址https://gitcode.com/OpenHarmonyPCDeveloper前言Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的开源框架。通过将 Chromium 渲染引擎和 Node.js 运行时嵌入到二进制文件中Electron 允许开发者使用统一的 Web 技术栈创建可在 Windows、macOS、Linux 和 HarmonyOS 上运行的原生桌面应用。系统要求开发环境要求操作系统: Windows 10/11、macOS 10.15、Ubuntu 22.04IDE: DevEco Studio 5.0 鸿蒙官方 IDENode.js: 建议 v18.x 或更高版本内存: 至少 8GB RAM推荐 16GB存储空间: 至少 20GB 可用空间目标设备要求鸿蒙设备: HarmonyOS NEXT (API 20)设备类型: 平板电脑或 2in1 设备连接方式: USB Type-C 数据线重要提示: 如果需要从源码编译 Electron必须使用 Ubuntu 22.04 环境。但对于大多数开发场景直接使用预编译产物即可。鸿蒙 Electron 框架导入操作指南这里可以参考之前的文章Electron 鸿蒙pc开发环境搭建完整保姆级教程windowhttps://blog.csdn.net/m0_61243965/article/details/155104889简易绘图板项目概述简易绘图板是一个基于Electron的桌面应用为用户提供直观的绘图体验。该应用支持多种绘图工具、颜色选择和画布操作界面简洁易用同时也做了鸿蒙PC端的适配。核心功能绘图工具支持画笔、橡皮擦、直线、矩形、圆形、文本和填充工具颜色管理提供颜色选择器和快速颜色面板️笔触调整可调节线条宽度画布操作支持清空、撤销、重做和保存画布⌨️键盘快捷键常用功能支持快捷键操作状态显示实时显示鼠标位置、画布大小和当前工具深色模式自动适配系统深色/浅色主题技术架构主进程 (main.js)主进程负责应用的生命周期管理和系统集成窗口管理创建和管理应用主窗口设置窗口属性单实例控制确保应用只运行一个实例事件处理监听窗口最大化/取消最大化事件IPC通信接收渲染进程的画布保存请求应用生命周期处理应用启动、激活、关闭等事件预加载脚本 (preload.js)预加载脚本作为主进程和渲染进程之间的安全桥梁API暴露通过contextBridge向渲染进程暴露有限的API通信通道提供渲染进程与主进程通信的安全接口信息提供向渲染进程提供应用版本和系统平台信息渲染进程 (renderer.js)渲染进程负责用户界面和绘图逻辑绘图工具实现各种绘图工具的核心逻辑事件处理响应鼠标、键盘事件状态管理维护绘图历史和应用状态UI更新同步更新界面显示与应用状态文件结构07-simple-paint/ ├── main.js # 主进程代码 ├── preload.js # 预加载脚本 ├── index.html # 应用界面 ├── style.css # 样式文件 ├── renderer.js # 渲染进程代码 ├── assets/ # 资源文件包含图标等 └── README.md # 项目说明文档鸿蒙适配后结构ohos_hap/ ├── electron/ │ ├── libs/ │ │ └── arm64-v8a/ # 鸿蒙核心库文件 │ │ ├── libelectron.so │ │ ├── libadapter.so │ │ ├── libffmpeg.so │ │ └── libc_shared.so ├── web_engine/ │ └── src/ │ └── main/ │ └── resources/ │ └── resfile/ │ └── resources/ │ └── app/ # 放置electron应用代码 │ ├── main.js │ ├── preload.js │ ├── package.json │ ├── index.html │ ├── style.css │ ├── renderer.js │ └── assets/ └── module.json5 # 鸿蒙应用配置文件核心代码解析画布初始化functioninitCanvas(){// 设置画布尺寸resizeCanvas();// 初始化画布状态ctx.lineCapround;ctx.lineJoinround;ctx.lineWidthlineWidth.value;ctx.strokeStylecolorPicker.value;ctx.fillStylecolorPicker.value;// 保存初始空白画布状态saveToHistory();// 更新UI显示updateLineWidthDisplay();updateToolInfo();updateSizeInfo();// 设置事件监听器setupEventListeners();}这段代码负责画布的初始化工作包括设置初始绘图状态、保存初始历史记录和配置事件监听器。绘图工具实现以画笔工具为例casebrush:ctx.beginPath();ctx.moveTo(lastX,lastY);ctx.lineTo(x,y);ctx.stroke();lastXx;lastYy;break;不同工具通过统一的事件处理机制实现在draw()函数中根据当前选中的工具执行不同的绘图逻辑。历史记录管理// 保存到历史记录functionsaveToHistory(){// 如果当前位置不是历史记录的末尾则删除后面的记录if(historyIndexdrawingHistory.length-1){drawingHistorydrawingHistory.slice(0,historyIndex1);}// 限制历史记录数量if(drawingHistory.lengthMAX_HISTORY){drawingHistory.shift();historyIndex--;}// 保存当前画布状态constdataURLcanvas.toDataURL();drawingHistory.push(dataURL);historyIndex;// 更新按钮状态updateHistoryButtons();}// 从历史记录恢复functionrestoreFromHistory(index){if(index0||indexdrawingHistory.length)return;constimgnewImage();img.onloadfunction(){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0);};img.srcdrawingHistory[index];}历史记录功能通过保存画布的DataURL实现支持撤销和重做操作提升用户体验。键盘快捷键functionhandleKeydown(e){// Ctrl/Cmd Z 撤销if((e.ctrlKey||e.metaKey)e.keyz){e.preventDefault();undo();}// Ctrl/Cmd Y 重做if((e.ctrlKey||e.metaKey)e.keyy){e.preventDefault();redo();}// Ctrl/Cmd S 保存if((e.ctrlKey||e.metaKey)e.keys){e.preventDefault();saveCanvas();}// 数字键 1-7 快速选择工具if(e.key1e.key7){consttools[brush,eraser,line,rect,circle,text,fill];selectTool(tools[e.key-1]);}}通过键盘事件监听实现了常用功能的快捷键提高操作效率。使用指南选择工具点击工具栏中的工具按钮或使用数字键1-7选择对应工具调整颜色使用颜色选择器或快速颜色面板选择颜色调整线宽通过滑块调整线条宽度绘图操作画笔按住鼠标拖动绘制自由线条直线点击起点并拖动到终点形状点击起点并拖动确定形状大小文本点击画布位置在弹出框中输入文本填充点击区域填充颜色画布操作使用清空、撤销、重做按钮管理画布状态保存画布点击保存按钮或使用CtrlS保存当前画布性能优化历史记录限制限制最大历史记录数量防止内存占用过高事件委托高效处理UI事件样式优化使用CSS动画和过渡效果避免性能密集型操作响应式设计画布大小自适应窗口变化扩展建议添加更多绘图工具铅笔、喷枪、形状填充等实现图层功能支持多层绘图添加图片导入和编辑功能支持画布缩放和移动实现更丰富的文本格式设置添加模板功能提供预设图形模板开发说明安装依赖npminstall运行应用npmstart构建应用根据目标平台使用相应的Electron打包工具如electron-builder技术栈Electron跨平台桌面应用框架HTML5 Canvas绘图功能核心HTML/CSS/JavaScript前端开发技术Node.js后端功能支持IPC进程间通信机制鸿蒙PC适配改造指南1. 环境准备系统要求Windows 10/11、8GB RAM以上、20GB可用空间工具安装DevEco Studio 5.0安装鸿蒙SDK API 20Node.js 18.x2. 获取Electron鸿蒙编译产物登录Electron 鸿蒙官方仓库下载Electron 34版本的Release包.zip格式解压到项目目录确认electron/libs/arm64-v8a/下包含核心.so库3. 部署应用代码将Electron应用代码按指定目录结构放置web_engine/src/main/resources/resfile/resources/app/ ├── main.js ├── preload.js ├── package.json ├── index.html ├── style.css ├── renderer.js └── assets/ └── icon.png4. 配置与运行打开项目在DevEco Studio中打开ohos_hap目录配置签名进入File → Project Structure → Signing Configs自动生成调试签名或导入已有签名连接设备启用鸿蒙设备开发者模式和USB调试通过USB Type-C连接电脑编译运行点击Run按钮或按ShiftF10跨平台兼容性平台适配策略特殊处理Windows标准Electron运行无特殊配置macOS标准Electron运行保留dock图标激活逻辑Linux标准Electron运行确保系统依赖库完整鸿蒙PC通过Electron鸿蒙适配层禁用硬件加速使用特定目录结构鸿蒙开发调试技巧1. 日志查看在DevEco Studio的Log面板中过滤Electron关键词查看应用运行日志和错误信息。2. 常见问题解决SysCap不匹配错误检查module.json5中的reqSysCapabilities只保留必要系统能力找不到.so文件错误确认arm64-v8a目录下四个核心库文件完整窗口不显示在main.js中添加app.disableHardwareAcceleration()画布绘制异常确保Canvas操作在主线程执行避免跨线程操作问题总结简易绘图板项目充分展示了Electron for HarmonyOS的技术可行性开发者可以使用熟悉的HTML/CSS/JavaScript技术栈——这些技术支撑了全球数百万开发者和数十万应用——构建同时支持鸿蒙OS、Windows、macOS、Linux的原生桌面应用适配成本低。该项目为希望将Electron应用迁移至鸿蒙平台或基于Web技术栈开发鸿蒙桌面应用的开发者提供了一个完整、可复用的参考范例为鸿蒙PC桌面生态的繁荣贡献了一份实践力量。
