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.04+
• IDE: DevEco Studio 5.0+ （鸿蒙官方 IDE）
• Node.js: 建议 v18.x 或更高版本
• 内存: 至少 8GB RAM（推荐 16GB）
• 存储空间: 至少 20GB 可用空间
• 目标设备要求
• 鸿蒙设备: HarmonyOS NEXT (API 20)
• 设备类型: 平板电脑或 2in1 设备
• 连接方式: USB Type-C 数据线

重要提示: 如果需要从源码编译 Electron，必须使用 Ubuntu 22.04 环境。但对于大多数开发场景，直接使用预编译产物即可。

鸿蒙 Electron 框架导入操作指南

这里可以参考之前的文章：
Electron 鸿蒙pc开发环境搭建完整保姆级教程（window）：
https://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.lineCap='round';ctx.lineJoin='round';ctx.lineWidth=lineWidth.value;ctx.strokeStyle=colorPicker.value;ctx.fillStyle=colorPicker.value;// 保存初始空白画布状态saveToHistory();// 更新UI显示updateLineWidthDisplay();updateToolInfo();updateSizeInfo();// 设置事件监听器setupEventListeners();}

这段代码负责画布的初始化工作，包括设置初始绘图状态、保存初始历史记录和配置事件监听器。

绘图工具实现

以画笔工具为例：

case'brush':ctx.beginPath();ctx.moveTo(lastX,lastY);ctx.lineTo(x,y);ctx.stroke();lastX=x;lastY=y;break;

不同工具通过统一的事件处理机制实现，在draw()函数中根据当前选中的工具执行不同的绘图逻辑。

历史记录管理

// 保存到历史记录functionsaveToHistory(){// 如果当前位置不是历史记录的末尾，则删除后面的记录if(historyIndex<drawingHistory.length-1){drawingHistory=drawingHistory.slice(0,historyIndex+1);}// 限制历史记录数量if(drawingHistory.length>=MAX_HISTORY){drawingHistory.shift();historyIndex--;}// 保存当前画布状态constdataURL=canvas.toDataURL();drawingHistory.push(dataURL);historyIndex++;// 更新按钮状态updateHistoryButtons();}// 从历史记录恢复functionrestoreFromHistory(index){if(index<0||index>=drawingHistory.length)return;constimg=newImage();img.onload=function(){ctx.clearRect(0,0,canvas.width,canvas.height);ctx.drawImage(img,0,0);};img.src=drawingHistory[index];}

历史记录功能通过保存画布的DataURL实现，支持撤销和重做操作，提升用户体验。

键盘快捷键

functionhandleKeydown(e){// Ctrl/Cmd + Z 撤销if((e.ctrlKey||e.metaKey)&&e.key==='z'){e.preventDefault();undo();}// Ctrl/Cmd + Y 重做if((e.ctrlKey||e.metaKey)&&e.key==='y'){e.preventDefault();redo();}// Ctrl/Cmd + S 保存if((e.ctrlKey||e.metaKey)&&e.key==='s'){e.preventDefault();saveCanvas();}// 数字键 1-7 快速选择工具if(e.key>='1'&&e.key<='7'){consttools=['brush','eraser','line','rect','circle','text','fill'];selectTool(tools[e.key-1]);}}

通过键盘事件监听实现了常用功能的快捷键，提高操作效率。

使用指南

1. 选择工具：点击工具栏中的工具按钮或使用数字键1-7选择对应工具
2. 调整颜色：使用颜色选择器或快速颜色面板选择颜色
3. 调整线宽：通过滑块调整线条宽度
4. 绘图操作：
   • 画笔：按住鼠标拖动绘制自由线条
   • 直线：点击起点并拖动到终点
   • 形状：点击起点并拖动确定形状大小
   • 文本：点击画布位置，在弹出框中输入文本
   • 填充：点击区域填充颜色
5. 画布操作：使用清空、撤销、重做按钮管理画布状态
6. 保存画布：点击保存按钮或使用Ctrl+S保存当前画布

性能优化

• 历史记录限制：限制最大历史记录数量，防止内存占用过高
• 事件委托：高效处理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 20+）
  • Node.js 18.x+

2. 获取Electron鸿蒙编译产物

1. 登录Electron 鸿蒙官方仓库
2. 下载Electron 34+版本的Release包（.zip格式）
3. 解压到项目目录，确认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.png

4. 配置与运行

1. 打开项目：在DevEco Studio中打开ohos_hap目录
2. 配置签名：
   • 进入File → Project Structure → Signing Configs
   • 自动生成调试签名或导入已有签名
3. 连接设备：
   • 启用鸿蒙设备开发者模式和USB调试
   • 通过USB Type-C连接电脑
4. 编译运行：点击Run按钮或按Shift+F10

跨平台兼容性

鸿蒙开发调试技巧

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桌面生态的繁荣贡献了一份实践力量。