颜色色值处理

colorUtil.js

/**
 *
 * @param {*} hex
 * 把一个hex表示的色值转换为rgb表示的色值，并将r g b值以数组形式返回
 */
const hex2RgbArr = function(hex) {
  let reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
  hex = hex.toLowerCase();
  if (hex && reg.test(hex)) {
    //4位是包含井号
    if (hex.length === 4) {
      //转换为6位的色值
      let color6 = "#";
      for (let i = 1; i < 4; i += 1) {
        color6 += hex.slice(i, i + 1).concat(hex.slice(i, i + 1));
      }
      hex = color6;
    }
    //处理六位的颜色值
    let finalColor = [];
    for (let i = 1; i < 7; i += 2) {
      finalColor.push(parseInt("0x" + hex.slice(i, i + 2)));
    }
    return finalColor;
  } else {
    throw new Error("param error: " + hex);
  }
};

/**
 *
 * @param {*} hex
 * 把一个hex表示的色值转换为rgb表示的色值
 */
const hex2Rgb = function(hex) {
  let hexArr = hex2RgbArr(hex);
  return `rgb(${hexArr.join(",")})`;
};
/**
 *
 * @param {*} rgb，例如: rgb(255,255,255)
 */
const rgb2Hex = function(rgb) {
  if (/^(rgb|RGB)/.test(rgb)) {
    let colorArr = rgb.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    let hexStr = "#";
    for (let i = 0; i < colorArr.length; i++) {
      let hex = Number(colorArr[i]).toString(16);
      hex.length === 1 && (hex = "0" + hex); // 保证每个rgb的值为2位
      hexStr += hex;
    }
    return hexStr;
  } else {
    throw new Error("param error: " + rgb);
  }
};

/**
 * 3位简写的rgb数值转换为6位
 */
const rgb32Rgb6 = function(rgb3) {
  if (!rgb3 || rgb3.length !== 4 || rgb3.indexOf("#") === -1) {
    throw new Error("param error: " + rgb3);
  }
  rgb3 = rgb3.replace("#", "");
  let rgb6 = "#";
  rgb6 += rgb3[0] + rgb3[0] + rgb3[1] + rgb3[1] + rgb3[2] + rgb3[2];
  return rgb6;
};

/**
 *
 * @param {*} start 起始色值 16进制，例如#339900
 * @param {*} end 结束色值 16进制，例如#339900
 * @param {*} count 分几档
 */
const getGradientColors = function(start, end, count) {
  if (
    !start ||
    start.length != 7 ||
    start.indexOf("#") === -1 ||
    !end ||
    end.length != 7 ||
    end.indexOf("#") === -1
  ) {
    throw new Error("param error");
  }
  //
  if (count < 2) {
    throw new Error("count can not less than 2");
  }
  let startArr = hex2RgbArr(start);
  let endArr = hex2RgbArr(end);

  let startR = startArr[0];
  let startG = startArr[1];
  let startB = startArr[2];

  let endR = endArr[0];
  let endG = endArr[1];
  let endB = endArr[2];

  //之所以减1是因为步进值是：（终止值 - 起始值）/ (count-1)，比如，3-5之间分2种状态的话，步进值是(5-3)/(2-1)=2，此时状态分别为：3，5。如果步进值是1，此时计算出的状态为3,4
  count -= 1;
  let singleDifferR = (endR - startR) / count;
  let singleDifferG = (endG - startG) / count;
  let singleDifferB = (endB - startB) / count;

  let gradientColorArr = [];
  let rgb;
  for (let i = 0; i < count + 1; i++) {
    rgb = `rgb(${startR + Math.round(singleDifferR * i)},${startG +
      Math.round(singleDifferG * i)},${startB +
      Math.round(singleDifferB * i)})`;
    gradientColorArr.push(rgb2Hex(rgb));
  }
  return gradientColorArr;
};