开发者工具箱-鸿蒙颜色转换器开发笔记

鸿蒙颜色转换器开发笔记

前言

最近在搞鸿蒙工具箱,想着加个颜色转换功能。这玩意主要是用来转换各种颜色格式,比如把"#FF0000"转换成"rgb(255, 0, 0)"、"hsl(0, 100%, 50%)"等等。本来以为挺简单的,结果发现要处理各种格式,调试了好几次才搞定。

写这个工具的时候遇到不少坑,比如颜色格式验证、颜色空间转换、颜色选择器实现等等。不过最后都解决了,现在用起来还挺顺手的。

一、功能说明

1.1 主要功能

支持多种颜色格式互转：HEX、RGB、HSL
支持可视化颜色选择器
支持常用颜色快速选择
支持HSL参数精确调节
实时预览转换结果
一键复制结果
收藏功能

1.2 界面功能

文本输入框
颜色选择器
格式选择列表
结果显示
复制按钮

二、实现过程

2.1 开发小故事

记得刚开始写这个功能的时候,我直接用了网上找的一个转换函数,结果发现各种问题。比如输入"#FFF"的时候,转换出来是"rgb(255, 255, 255)",但是用户说不对,应该是"rgb(255, 255, 255, 1)"。后来查了一下,发现不同场景下对颜色格式的处理要求不一样,有的要带透明度,有的不要,真是头疼。

还有一次,用户反馈说输入"rgb(255, 0, 0)"的时候,转换出来是"#FF0000",但是他想看到"hsl(0, 100%, 50%)"。这个需求让我改了好几次代码,最后加了个判断,根据用户选择的格式来转换。

最搞笑的是处理HSL转换的问题。一开始没处理HSL,结果用户说不行,必须支持HSL。后来赶紧加了个HSL转换,但是发现HSL转RGB的时候,有时候会出问题,比如色相值超出范围。最后改了好几遍才搞定。

还有个小插曲,有个用户说颜色选择器不好用,我一开始还觉得挺委屈,心想这不是挺简单的吗。结果自己试了一下,发现确实有点问题,比如选颜色的时候,有时候会选到旁边的颜色,而且预览效果也不够直观。后来改了好几版,加了个放大镜效果,这才好多了。

2.2 临时解决方案

颜色格式验证问题
- 临时方案：直接用正则验证,简单粗暴
- 问题：有时候会把不该验证的格式也验证了,结果一堆错误
- 最终方案：老老实实用正则表达式验证每种格式,虽然麻烦点,但靠谱
颜色空间转换问题
- 临时方案：直接转RGB,不管其他格式
- 问题：有时候会把不该转换的格式也转换了,用户不乐意
- 最终方案：根据格式类型判断是否需要转换,体验好多了
颜色选择器问题
- 临时方案：用系统自带的颜色选择器,省事
- 问题：用户说不好用,要自定义
- 最终方案：自己实现一个颜色选择器,虽然麻烦点,但用户满意
HSL调节问题
- 临时方案：用输入框输入HSL值,简单
- 问题：用户说不好用,要滑块调节
- 最终方案：用滑块实现HSL调节,方便调节,用户体验好多了

2.3 调试案例

颜色格式验证

typescript 复制代码

static isValidHex(color: string): boolean {
  return /^#([A-Fa-f0-9]{3}){1,2}$/.test(color)
}

static isValidRGB(color: string): boolean {
  return /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.test(color)
}

static isValidHSL(color: string): boolean {
  return /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/.test(color)
}

这个验证函数我真是改了又改。最开始用了个简单的正则,结果发现处理不了特殊格式。后来改成了复杂的正则,但是处理HSL的时候又出问题了。最后改成了现在的算法,虽然代码看起来有点乱,但是能处理各种情况。

颜色空间转换

typescript 复制代码

static hexToRgb(hex: string): string {
  hex = hex.replace('#', '')
  if(hex.length === 3) {
    hex = hex.split('').map(char => char + char).join('')
  }
  const r: number = parseInt(hex.substring(0, 2), 16)
  const g: number = parseInt(hex.substring(2, 4), 16)
  const b: number = parseInt(hex.substring(4, 6), 16)
  return `rgb(${r}, ${g}, ${b})`
}

static rgbToHex(rgb: string): string {
  const matches: RegExpMatchArray | null = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
  if (!matches) return rgb
  const r: number = parseInt(matches[1])
  const g: number = parseInt(matches[2])
  const b: number = parseInt(matches[3])
  const toHex = (n: number): string => {
    const hex = n.toString(16)
    return hex.length === 1 ? '0' + hex : hex
  }
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}

这个转换函数也改了好几次。最开始用了个简单的算法,结果发现处理不了特殊格式。后来改成了复杂的算法,但是处理HSL的时候又出问题了。最后改成了现在的算法,虽然代码看起来有点乱,但是能处理各种情况。

三、踩坑记录

3.1 遇到的问题

颜色格式验证问题
- 问题：用户输入不规范,比如多个分隔符
- 解决：加了正则验证,自动处理
- 建议：输入时就限制格式,别给自己找麻烦
颜色空间转换问题
- 问题：转换结果不准确
- 解决：根据格式类型判断
- 建议：其实可以让用户自定义
颜色选择器问题
- 问题：选择器不好用
- 解决：自己实现一个选择器
- 建议：可以自定义选择器
HSL调节问题
- 问题：调节不方便
- 解决：用滑块实现
- 建议：可以自定义调节方式

3.2 优化建议

功能优化
- 支持更多格式
- 加个历史记录
- 支持批量转换
- 格式分类、导入导出、管理、分享、备份啥的都能加
性能优化
- 优化转换速度
- 减少内存占用
- 及时释放资源
- 多线程、算法优化、结果缓存、异步处理都可以试试
用户体验
- 加个使用说明
- 支持快捷键
- 动画效果、主题、分享、收藏、导入、备份啥的都能加

四、总结

这个颜色转换工具,基本功能都齐了：

支持多种格式转换
实时预览结果
一键复制结果
收藏常用设置

有些边角问题其实还没完全搞定,不过大部分场景都能用。后面有空再慢慢优化吧。

五、参考资料

鸿蒙应用开发指南

欢迎体验

这个颜色转换工具已经集成到鸿蒙开发者工具箱里了,欢迎下载体验！

鸿蒙开发者工具箱

作者：在人间耕耘

邮箱：[email protected]

版权声明：本文为原创文章

如果你也遇到类似问题,欢迎留言交流,搞不定咱们一起头疼！