基于Electron for 鸿蒙开发的现代化颜色选择器

项目介绍

这是一个基于Electron for 鸿蒙PC开发的现代化颜色选择器工具，提供直观、高效的颜色选择与管理体验。该工具整合了专业级色彩处理功能，适用于设计师、开发者等需要精确颜色控制的场景，支持在桌面环境中实现流畅的色彩交互。

功能特点

多模式选择器：集成色轮选择器、滑块选择器、拾色器三种可视化选择方式
全格式支持：提供RGB、HSL、HEX、HSV四种颜色格式的精确输入与实时转换
调色板管理：支持创建、保存、编辑自定义调色板，支持批量导入导出（JSON/CSV）
历史记录：自动记录最近使用的颜色（最多100条），支持一键重新选择
对比度检查：实时计算当前颜色与背景色的对比度，符合WCAG可访问性标准
实时预览：提供颜色应用效果的实时预览区域，支持调整预览样式
深色模式适配：自动识别系统主题，提供浅色/深色两种界面模式
快捷键支持：常用操作可通过键盘快捷键快速完成，提升操作效率

技术实现

主进程（main.js）

主进程负责应用窗口管理、系统资源访问（如屏幕拾色功能）、文件操作（调色板导入导出）等核心功能，通过Electron的BrowserWindow创建支持透明背景和无边框模式的交互窗口。

预加载脚本（preload.js）

使用contextBridge安全暴露核心API到渲染进程，包括屏幕拾色、文件读写、系统主题检测等权限受限的功能，确保渲染进程的安全性。

渲染进程（renderer.js）

实现颜色选择器的核心交互逻辑：

色轮绘制与坐标转换（将鼠标位置映射为HSV颜色值）
颜色格式实时转换算法（RGB↔HSL↔HEX↔HSV）
调色板数据的CRUD操作与本地存储
对比度计算与可访问性评分
快捷键事件监听与处理

样式实现（style.css）

采用CSS变量实现主题切换，通过渐变与阴影模拟色轮视觉效果，使用过渡动画提升颜色变化时的视觉体验，确保界面响应式适配不同屏幕尺寸。

工具类（colorUtils.js）

封装颜色处理的核心算法，包括：

颜色格式转换函数
对比度计算函数（基于WCAG标准）
颜色亮度/饱和度调整函数
调色板颜色排序算法

代码结构

main.js - Electron主进程代码，管理窗口与系统交互
preload.js - 预加载脚本，安全暴露系统级API
index.html - 应用界面结构，包含各种选择器组件
style.css - 样式定义，支持主题切换与响应式设计
renderer.js - 渲染进程逻辑，处理用户交互与UI更新
colorUtils.js - 颜色处理工具类，提供核心算法支持
store.js - 本地存储管理，处理调色板与历史记录

核心代码示例

1. 色轮选择器逻辑

javascript 复制代码

// 色轮点击事件处理
function handleColorWheelClick(e) {
  const rect = colorWheel.getBoundingClientRect();
  const centerX = rect.width / 2;
  const centerY = rect.height / 2;
  
  // 计算点击位置相对于中心的坐标
  const x = e.clientX - rect.left - centerX;
  const y = e.clientY - rect.top - centerY;
  
  // 计算角度（色相）和距离（饱和度）
  const hue = (Math.atan2(y, x) * 180 / Math.PI + 360) % 360;
  const saturation = Math.min(Math.sqrt(x*x + y*y) / centerX, 1);
  
  // 更新当前颜色并同步到所有控件
  updateColor({
    h: hue,
    s: saturation * 100,
    v: currentColor.v, // 保持当前明度
    a: currentColor.a  // 保持当前透明度
  });
}

2. 颜色格式转换

javascript 复制代码

// HSV转RGB
function hsvToRgb(h, s, v) {
  s /= 100;
  v /= 100;
  
  const c = v * s;
  const x = c * (1 - Math.abs((h / 60) % 2 - 1));
  const m = v - c;
  
  let r, g, b;
  
  if (h >= 0 && h < 60) {
    [r, g, b] = [c, x, 0];
  } else if (h < 120) {
    [r, g, b] = [x, c, 0];
  } 
  // 其他色相范围处理...
  
  return {
    r: Math.round((r + m) * 255),
    g: Math.round((g + m) * 255),
    b: Math.round((b + m) * 255)
  };
}

// RGB转HEX
function rgbToHex(r, g, b) {
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}

3. 对比度检查

javascript 复制代码

// 计算两个颜色的对比度（基于WCAG标准）
function calculateContrast(color1, color2) {
  // 转换为相对亮度
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  
  // 计算对比度 ratio = (L1 + 0.05) / (L2 + 0.05)，L1是较亮颜色的亮度
  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
  
  // 返回对比度值和符合的标准等级
  return {
    ratio: parseFloat(ratio.toFixed(2)),
    level: ratio >= 7 ? 'AAA' : ratio >= 4.5 ? 'AA' : 'Fail'
  };
}

// 计算相对亮度
function getRelativeLuminance(rgb) {
  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(component => {
    const value = component / 255;
    return value <= 0.03928 
      ? value / 12.92 
      : Math.pow((value + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

4. 调色板管理

javascript 复制代码

// 保存调色板
function savePalette(name, colors) {
  if (!name || !colors || colors.length === 0) return false;
  
  const palette = {
    id: Date.now().toString(),
    name,
    colors,
    createdAt: new Date().toISOString()
  };
  
  const palettes = JSON.parse(localStorage.getItem('palettes') || '[]');
  palettes.push(palette);
  localStorage.setItem('palettes', JSON.stringify(palettes));
  
  return palette.id;
}

// 加载所有调色板
function loadAllPalettes() {
  return JSON.parse(localStorage.getItem('palettes') || '[]');
}

如何使用

基本使用

色轮选择：直接点击或拖动色轮选择色相和饱和度，拖动明度滑块调整亮度
数值输入：在RGB/HSL/HEX输入框中直接输入数值（支持实时转换）
屏幕拾色：点击拾色按钮，移动到屏幕任意位置点击获取颜色
添加到调色板：选择颜色后点击"添加到调色板"按钮，选择目标调色板

高级配置

自定义调色板：点击"新建调色板"，输入名称创建专属调色板
历史记录：左侧历史记录面板显示最近使用的颜色，点击可快速复用
对比度检查：在右侧对比度面板设置背景色，实时查看对比度评分
导入导出：支持将调色板导出为JSON文件，或从JSON/CSV文件导入

JavaScript API

通过API可在其他Electron应用中集成该颜色选择器：

javascript 复制代码

// 打开颜色选择器
const selectedColor = await window.colorPicker.open({
  initialColor: '#FF5733',
  showAlpha: true,
  defaultFormat: 'hex'
});

// 保存调色板
window.colorPicker.savePalette('我的主题色', [
  '#FF5733', '#33FF57', '#3357FF'
]);

// 检查对比度
const contrast = window.colorPicker.checkContrast('#FFFFFF', '#000000');

运行方法

安装依赖

bash 复制代码

npm install

启动应用

bash 复制代码

npm start

打包应用（可选）

bash 复制代码

npm run package

注意事项

不同设备的显示器存在色差，精确配色建议结合专业校色设备
导出的调色板文件建议备份，避免本地存储数据丢失
对比度检查仅作为参考，实际使用需结合真实场景测试
拾色功能在部分系统窗口（如全屏游戏）中可能无法正常工作
处理透明色时，注意不同应用对alpha通道的解析差异

鸿蒙适配后结构（需整合到 Electron 鸿蒙项目模板中）：

plaintext 复制代码

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
│                           ├── package.json
│                           └── src/
└── module.json5        # 鸿蒙应用配置文件

鸿蒙PC适配改造指南

1. 环境准备

系统要求：Windows 10/11、8GB RAM以上、20GB可用空间
工具安装 ：

DevEco Studio 5.0+（安装鸿蒙SDK API 20+）
Node.js 18.x+

2. 获取Electron鸿蒙编译产物

登录Electron 鸿蒙官方仓库
下载Electron 34+版本的Release包（.zip格式）
解压到项目目录，确认electron/libs/arm64-v8a/下包含核心.so库

3. 部署应用代码

将Electron应用代码按以下目录结构放置：

plaintext 复制代码

web_engine/src/main/resources/resfile/resources/app/
├── main.js
├── package.json
└── src/
    ├── index.html
    ├── preload.js
    ├── renderer.js
    └── style.css

4. 配置与运行

打开项目：在DevEco Studio中打开ohos_hap目录
配置签名 ：

进入File → Project Structure → Signing Configs
自动生成调试签名或导入已有签名
连接设备 ：

启用鸿蒙设备开发者模式和USB调试
通过USB Type-C连接电脑
编译运行：点击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动画效果，减少重绘频率