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

国服第二切图仔2025-12-09 9:30

项目介绍

这是一个基于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') || '[]');
}

如何使用

基本使用

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

高级配置

  • 自定义调色板：点击"新建调色板"，输入名称创建专属调色板
  • 历史记录：左侧历史记录面板显示最近使用的颜色，点击可快速复用
  • 对比度检查：在右侧对比度面板设置背景色，实时查看对比度评分
  • 导入导出：支持将调色板导出为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');

运行方法

  1. 安装依赖
bash 复制代码 
npm install
  1. 启动应用
bash 复制代码 
npm start
  1. 打包应用（可选）
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鸿蒙编译产物

  1. 登录Electron 鸿蒙官方仓库

  2. 下载Electron 34+版本的Release包（.zip格式）

  3. 解压到项目目录，确认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. 配置与运行

  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动画效果，减少重绘频率

相关推荐
lqj_本人1 天前
Flutter_Rust_Bridge：让 Flutter 稳定调用 Rust 的跨语言桥梁
harmonyos
贾伟康1 天前
【HarmonyOS 7新能力｜040】QUIC长连接工程封装：把接入逻辑放进可维护的分层结构
网络编程·harmonyos·arkts·quic·软件架构
Access开发易登软件1 天前
Access 复杂业务计算，SQL 写在 VBA 还是存储过程？
microsoft·vba·access·access开发
hqzing1 天前
Harmonybrew 仓库中的 gcc（GCC 16）和 llvm（LLVM 23）已经可用
harmonyos
万物智能信息科技1 天前
PWM散热风扇设置—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
人工智能·华为·开源·harmonyos·鸿蒙
aqi001 天前
一文读懂 HarmonyOS 7.0 带来的十大API重要升级
android·华为·harmonyos·鸿蒙·harmony
贾伟康1 天前
【HarmonyOS 7新能力｜037】数字盾工程封装：把接入逻辑放进可维护的分层结构
安全·harmonyos·arkts·软件架构·数字签名
ai安歌1 天前
不调用外部 typst 命令：Draftmark 用 FRB 内嵌排版引擎的实现
harmonyos
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05人工智能（AI）发展史：详细里程碑06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08ZCode 周末送额度活动开启：3 亿 Token 免费领取09数学公理体系大全:第六章 选择公理的等价形式及证明102026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享