📜  线性渐变到 RGB 转换器 (1)

📅  最后修改于: 2023-12-03 15:41:14.447000             🧑  作者: Mango

线性渐变到 RGB 转换器

线性渐变到 RGB 转换器是一种用于将色谱的线性渐变转换为对应 RGB 值的工具。它可以帮助开发人员在设计和实现图形界面、可视化图表等应用程序时更加方便地管理和使用渐变色。

思路

线性渐变通常由起始颜色、终止颜色和过渡颜色组成。在 RGB 色彩空间中,每个颜色由红、绿、蓝三个分量组成。因此,我们可以将线性渐变转换为 RGB 值的过程分解为以下三个步骤:

  1. 将起始颜色、终止颜色和过渡颜色转换为对应的 RGB 值。
  2. 根据线性渐变的比例计算每个颜色分量的值。
  3. 将计算出的每个颜色分量值合并为最终的 RGB 值。
代码实现

下面是一个简单的 JavaScript 实现:

/**
 * 将颜色字符串转换为 RGB 值。
 * @param {string} color 颜色字符串。
 * @returns {[number, number, number]} RGB 值。
 */
function colorToRgb(color) {
  if (/^#([0-9a-fA-F]{3}){1,2}$/.test(color)) {
    // 处理 #fff 或 #ffffff 形式的十六进制颜色。
    let hex = color.slice(1);
    if (hex.length === 3) {
      hex = hex.replace(/[0-9a-fA-F]/g, match => match + match);
    }
    return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
  } else if (/^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(color)) {
    // 处理 rgb(255, 255, 255) 形式的 RGB 颜色。
    return color.slice(4, -1).split(',').map(value => parseInt(value.trim(), 10));
  } else if (/^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*1(\.0+)?\s*\)$/.test(color)) {
    // 处理 rgba(255, 255, 255, 1) 形式的不透明 RGB 颜色。
    return color.slice(5, -1).split(',').map(value => parseInt(value.trim(), 10));
  } else {
    throw new Error(`Invalid color string: ${color}`);
  }
}

/**
 * 将 RGB 值转换为颜色字符串。
 * @param {[number, number, number]} rgb RGB 值。
 * @returns {string} 颜色字符串。
 */
function rgbToColor(rgb) {
  return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}

/**
 * 将线性渐变转换为一组 RGB 值。
 * @param {string} startColor 起始颜色。
 * @param {string} endColor 终止颜色。
 * @param {number[]} stops 过渡颜色对应的位置(取值范围为 [0, 1])。
 * @returns {[number, number, number][]} 像素颜色数组。
 */
function linearGradientToRgb(startColor, endColor, stops) {
  const [startR, startG, startB] = colorToRgb(startColor);
  const [endR, endG, endB] = colorToRgb(endColor);
  return stops.map(stop => {
    const r = Math.round(startR + (endR - startR) * stop);
    const g = Math.round(startG + (endG - startG) * stop);
    const b = Math.round(startB + (endB - startB) * stop);
    return [r, g, b];
  });
}
函数说明

该代码实现包含三个函数:

colorToRgb(color)

将颜色字符串转换为 RGB 值。支持以下格式的颜色字符串:

  • 十六进制颜色:#fff#ffffff 等。
  • RGB 颜色:rgb(255, 255, 255)rgba(255, 255, 255, 1) 等。

如果无法识别颜色字符串,将抛出异常。

rgbToColor(rgb)

将 RGB 值转换为颜色字符串。返回形如 rgb(255, 255, 255) 的字符串。

linearGradientToRgb(startColor, endColor, stops)

将线性渐变转换为一组 RGB 值。需要提供起始颜色、终止颜色和过渡颜色对应的位置(即 0 ~ 1 之间的数值)。返回值为包含每个位置对应的 RGB 值的数组。