fade-color-pictogram/src/components/common.js

一个简单的渐变色象形图

// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function colorToRgb(sColorVal) {
  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  let sColor = sColorVal.toLowerCase()
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      var sColorNew = '#'
      for (var i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
      }
      sColor = sColorNew
    }
    // 处理六位的颜色值
    var sColorChange = []
    for (let i = 1; i < 7; i += 2) {
      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
    }
    return sColorChange
  } else {
    return sColor
  }
};

// 将rgb表示方式转换为hex表示方式
function colorToHex(rgb) {
  var _this = rgb
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  if (/^(rgb|RGB)/.test(_this)) {
    var aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',')
    var strHex = '#'
    for (var i = 0; i < aColor.length; i++) {
      var hex = Number(aColor[i]).toString(16)
      hex = hex < 10 ? 0 + '' + hex : hex// 保证每个rgb的值为2位
      if (hex === '0') {
        hex += hex
      }
      strHex += hex
    }
    if (strHex.length !== 7) {
      strHex = _this
    }

    return strHex
  } else if (reg.test(_this)) {
    var aNum = _this.replace(/#/, '').split('')
    if (aNum.length === 6) {
      return _this
    } else if (aNum.length === 3) {
      var numHex = '#'
      for (let i = 0; i < aNum.length; i += 1) {
        numHex += (aNum[i] + aNum[i])
      }
      return numHex
    }
  } else {
    return _this
  }
}

export default {
  /**
   *
   * @param {string} startColor 开始颜色hex
   * @param {string} endColor 结束颜色hex
   * @param {string} step 几个阶级（几步）
   * @returns 返回hex类型的色值集合
   */
  gradientColor(startColor, endColor, step) {
    const startRGB = colorToRgb(startColor)// 转换为rgb数组模式
    const startR = startRGB[0]
    const startG = startRGB[1]
    const startB = startRGB[2]

    const endRGB = colorToRgb(endColor)
    const endR = endRGB[0]
    const endG = endRGB[1]
    const endB = endRGB[2]

    const sR = (endR - startR) / step// 总差值
    const sG = (endG - startG) / step
    const sB = (endB - startB) / step

    var colorArr = []
    for (var i = 0; i < step; i++) {
      // 计算每一步的hex值
      var hex = colorToHex('rgb(' + parseInt((sR * i + startR)) + ',' + parseInt((sG * i + startG)) + ',' + parseInt((sB * i + startB)) + ')')
      colorArr.push(hex)
    }
    return colorArr
  }
}