项目介绍

这是一个基于Electron for鸿蒙PC开发的颜色选择器组件演示应用，提供了丰富的颜色选择、调整和预览功能。这个项目适合初学者学习Electron组件开发和颜色处理技术。

功能特点

• 多格式颜色支持：支持HEX、RGB和HSL颜色格式
• 颜色滑块调节：通过RGB、HSL滑块精确调整颜色
• 预设颜色面板：提供多种预设颜色快速选择
• 随机颜色生成：一键生成随机颜色
• 颜色混合器：混合两种颜色并调整混合比例
• 实时颜色预览：在文本、背景和边框中实时预览颜色效果
• 深色/浅色主题：支持明暗两种主题模式
• 响应式设计：适配不同屏幕尺寸

技术实现

主进程代码 (main.js)

主进程负责创建和管理Electron应用窗口，处理应用生命周期事件，并提供颜色处理相关的IPC通信接口。

// 处理来自渲染进程的消息
ipcMain.on('color-selected', (event, color) => {
  console.log('Selected color:', color);
  // 可以在这里添加更多处理逻辑，如保存到配置等
});

// 发送颜色信息到渲染进程
ipcMain.handle('get-color-info', (event, color) => {
  // 模拟返回颜色信息
  return {
    hex: color,
    rgb: hexToRgb(color),
    hsl: rgbToHsl(hexToRgb(color))
  };
});

预加载脚本 (preload.js)

预加载脚本使用contextBridge安全地暴露Electron API到渲染进程，提供颜色选择器相关的功能。

contextBridge.exposeInMainWorld('colorPickerAPI', {
  // 选择颜色并通知主进程
  selectColor: (color) => {
    ipcRenderer.send('color-selected', color);
  },
  
  // 获取颜色信息
  getColorInfo: async (color) => {
    try {
      return await ipcRenderer.invoke('get-color-info', color);
    } catch (error) {
      console.error('Error getting color info:', error);
      return null;
    }
  },
  
  // 生成随机颜色
  generateRandomColor: () => {
    return `#${Math.floor(Math.random()*16777215).toString(16).padStart(6, '0')}`;
  },
  
  // 验证颜色格式
  isValidColor: (color) => {
    // 检查颜色格式的代码...
  }
});

渲染进程 (renderer.js)

渲染进程实现颜色选择器的核心交互逻辑，包括：

• 颜色选择和显示
• RGB/HSL滑块调整
• 预设颜色选择
• 随机颜色生成
• 颜色混合功能
• 实时预览更新
• 主题切换

代码结构

• main.js - Electron主进程，负责窗口创建和应用生命周期管理
• preload.js - 预加载脚本，安全暴露API到渲染进程
• index.html - 应用UI结构，包含各种颜色选择功能的演示
• style.css - 应用样式，定义颜色选择器的视觉效果
• renderer.js - 渲染进程代码，实现颜色选择器交互逻辑

核心代码示例

颜色格式转换

// 辅助函数：十六进制颜色转RGB
function hexToRgb(hex) {
  // 移除#号
  hex = hex.replace(/^#/, '');
  
  // 处理缩写形式 (#fff -> #ffffff)
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  
  return { r, g, b };
}

// 辅助函数：RGB转十六进制颜色
function rgbToHex(r, g, b) {
  return '#' + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  }).join('').toUpperCase();
}

// 辅助函数：RGB转HSL
function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;
  
  if (max === min) {
    h = s = 0; // 灰度
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    
    h /= 6;
  }
  
  return {
    h: Math.round(h * 360),
    s: Math.round(s * 100),
    l: Math.round(l * 100)
  };
}

颜色混合功能

// 辅助函数：混合两种颜色
function mixColors(color1, color2, ratio1, ratio2) {
  const rgb1 = hexToRgb(color1);
  const rgb2 = hexToRgb(color2);
  
  const totalRatio = ratio1 + ratio2;
  
  const r = Math.round((rgb1.r * ratio1 + rgb2.r * ratio2) / totalRatio);
  const g = Math.round((rgb1.g * ratio1 + rgb2.g * ratio2) / totalRatio);
  const b = Math.round((rgb1.b * ratio1 + rgb2.b * ratio2) / totalRatio);
  
  return rgbToHex(r, g, b);
}

主题切换功能

// 初始化深色模式
function initDarkMode() {
  // 检查本地存储中的主题偏好
  const isDarkMode = localStorage.getItem('darkMode') === 'true';
  elements.darkModeToggle.checked = isDarkMode;
  
  if (isDarkMode) {
    document.body.classList.add('dark-theme');
  }
}

// 切换深色模式
function toggleDarkMode() {
  const isDarkMode = elements.darkModeToggle.checked;
  
  if (isDarkMode) {
    document.body.classList.add('dark-theme');
  } else {
    document.body.classList.remove('dark-theme');
  }
  
  // 保存主题偏好
  localStorage.setItem('darkMode', isDarkMode);
}

如何使用

基本使用

在您的Electron项目中，可以参考以下步骤使用颜色选择器组件：

1. 将颜色选择器组件的HTML结构添加到您的页面：

<div class="color-picker-container">
  <input type="color" class="color-input" id="my-color-input" value="#3498db">
  <div class="color-value">
    <label>HEX:</label>
    <input type="text" id="hex-value" value="#3498db" readonly>
  </div>
</div>

2. 添加相关样式：

.color-picker-container {
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.color-input {
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 1rem;
}

.color-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-value input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: monospace;
}

3. 添加交互逻辑：

const colorInput = document.getElementById('my-color-input');
const hexValue = document.getElementById('hex-value');

colorInput.addEventListener('input', function() {
  hexValue.value = this.value;
  // 在这里可以添加更多处理逻辑，如更新预览、通知其他组件等
});

JavaScript API

通过预加载脚本暴露的API，您可以：

• window.colorPickerAPI.selectColor(color)：选择颜色并通知主进程
• window.colorPickerAPI.getColorInfo(color)：获取颜色的详细信息
• window.colorPickerAPI.generateRandomColor()：生成随机颜色
• window.colorPickerAPI.isValidColor(color)：验证颜色格式是否有效
• window.colorPickerAPI.onMessage(channel, callback)：监听来自主进程的消息

运行方法

1. 克隆或下载此项目
2. 进入项目目录
3. 安装依赖：

   npm install
   

4. 启动应用：

   npm start
   

扩展建议

1. 添加颜色收藏夹功能，保存常用颜色
2. 实现颜色历史记录，记录最近使用的颜色
3. 添加更高级的颜色混合模式（如乘法、叠加等）
4. 实现真正的屏幕拾色器功能（需要原生模块支持）
5. 添加颜色可访问性检查，评估颜色对比度
6. 实现调色板生成功能，基于选定的主色调生成协调的配色方案

注意事项

• 屏幕拾色器功能需要额外的原生模块支持（如robotjs）
• 某些高级颜色操作可能需要引入专门的颜色处理库
• 在处理用户输入的颜色值时，务必进行验证以确保格式正确
• 颜色在不同设备和显示器上可能会有细微差异

鸿蒙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
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

1. 打开项目：在DevEco Studio中打开ohos_hap目录

2. 配置签名：
   进入File → Project Structure → Signing Configs

3. 自动生成调试签名或导入已有签名

4. 连接设备：
   启用鸿蒙设备开发者模式和USB调试

5. 通过USB Type-C连接电脑

6. 编译运行：点击Run按钮或按Shift+F10

5. 验证检查项

• ✅ 应用窗口正常显示

• ✅ 窗口大小可调整，响应式布局生效

• ✅ 控制台无"SysCap不匹配"或"找不到.so文件"错误

• ✅ 动画效果正常播放

跨平台兼容性

平台	适配策略	特殊处理
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()

• 动画卡顿：简化CSS动画效果，减少重绘频率