Electron for鸿蒙PC实战项目之简易绘图板应用

项目概述

简易绘图板是一个基于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        # 鸿蒙应用配置文件

核心代码解析

画布初始化

function initCanvas() {
  // 设置画布尺寸
  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()函数中根据当前选中的工具执行不同的绘图逻辑。

历史记录管理

// 保存到历史记录
function saveToHistory() {
  // 如果当前位置不是历史记录的末尾，则删除后面的记录
  if (historyIndex < drawingHistory.length - 1) {
    drawingHistory = drawingHistory.slice(0, historyIndex + 1);
  }
  
  // 限制历史记录数量
  if (drawingHistory.length >= MAX_HISTORY) {
    drawingHistory.shift();
    historyIndex--;
  }
  
  // 保存当前画布状态
  const dataURL = canvas.toDataURL();
  drawingHistory.push(dataURL);
  historyIndex++;
  
  // 更新按钮状态
  updateHistoryButtons();
}

// 从历史记录恢复
function restoreFromHistory(index) {
  if (index < 0 || index >= drawingHistory.length) return;
  
  const img = new Image();
  img.onload = function() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
  };
  img.src = drawingHistory[index];
}

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

键盘快捷键

function handleKeydown(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') {
    const tools = ['brush', 'eraser', 'line', 'rect', 'circle', 'text', 'fill'];
    selectTool(tools[e.key - 1]);
  }
}

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

使用指南

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

性能优化

• 历史记录限制：限制最大历史记录数量，防止内存占用过高
• 事件委托：高效处理UI事件
• 样式优化：使用CSS动画和过渡效果，避免性能密集型操作
• 响应式设计：画布大小自适应窗口变化

扩展建议

• 添加更多绘图工具（铅笔、喷枪、形状填充等）
• 实现图层功能，支持多层绘图
• 添加图片导入和编辑功能
• 支持画布缩放和移动
• 实现更丰富的文本格式设置
• 添加模板功能，提供预设图形模板

开发说明

安装依赖

npm install

运行应用

npm start

构建应用

根据目标平台使用相应的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

跨平台兼容性

平台	适配策略	特殊处理
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操作在主线程执行，避免跨线程操作问题