鸿蒙UI开发——颜色选择器

1、概 述

取色对话框在实际项目开发中非常常见（效果类似如下图），有朋友留言希望讨论一下，那我们来实现一个基本的颜色选择器。

申明：

核心代码参考自项目：https://gitee.com/yranfantasy/harmony-color-picker。感谢这位朋友

2、颜色转换工具函数

在开始实现前，我们一般会用到几个转换工具函数，例如将 #ff000格式的颜色转换为[r,g,b]数组，同样，我们需要将[r,g,b]数组转换为对应的颜色表达字符串。相关的函数已经非常成熟，本文贴一个，代码如下（color-utils.ets文件）：

// color-utils.etsclass ColorUtils {
  
    hexToRgb(hex: string): [number, number, number] {
  
      const r = parseInt(hex.slice(1, 3), 16);    const g = parseInt(hex.slice(3, 5), 16);    const b = parseInt(hex.slice(5, 7), 16);    return [r, g, b];  }  hexToHsv(hex: string): [number, number, number] {
  
      hex = hex.replace('#', '');    const r = parseInt(hex.slice(0, 2), 16);    const g = parseInt(hex.slice(2, 4), 16);    const b = parseInt(hex.slice(4, 6), 16);    const max = Math.max(r, g, b);    const min = Math.min(r, g, b);    const value = max / 255;    let saturation = (max !== 0) ? ((max - min) / max) : 0;    let hue = 0;    if (saturation === 0) {
  
        hue = 0;    } else {
  
        switch (max) {
  
          case r:          hue = ((g - b) / (max - min)) + (g < b ? 6 : 0);          break;        case g:          hue = ((b - r) / (max - min)) + 2;          break;        case b:          hue = ((r - g) / (max - min)) + 4;          break;      }      hue /= 6;      hue = hue >= 0 ? hue : hue + 1;    }    return [hue * 360, saturation, value];  }  hsvToHex(h: number, s: number, v: number): string {
  
      let r: number = 0, g: number = 0, b: number = 0;    let i = Math.floor(h / 60);    let f = h / 60 - i;    let p = v * (1 - s);    let q = v * (1 - f * s);    let t = v * (1 - (1 - f) * s);    switch (i % 6) {
  
        case 0:        r = v;        g = t;        b = p;        break;      case 1:        r = q;        g = v;        b = p;        break;      case 2:        r = p;        g = v;        b = t;        break;      case 3:        r = p;        g = q;        b = v;        break;      case 4:        r = t;        g = p;        b = v;        break;      case 5:        r = v;        g = p;        b = q;        break;    }    r = Math.round(r * 255);    g = Math.round(g * 255);    b = Math.round(b * 255);    return `#${this.toHex(r)}${this.toHex(g)}${this.toHex(b)}`;  }  toHex(n: number) {
  
      let hex = n.toString(16);    return hex.length === 1 ? '0' + hex : hex;