/** * 求两个颜色之间的渐变值 * @param {string} startColor 开始的颜色 * @param {string} endColor 结束的颜色 * @param {number} step 颜色等分的份额 * */ function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) { const startRGB = hexToRgb(startColor, false) // 转换为rgb数组模式 const startR = startRGB[0] const startG = startRGB[1] const startB = startRGB[2] const endRGB = hexToRgb(endColor, false) 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 const colorArr = [] for (let i = 0; i < step; i++) { // 计算每一步的hex值 let hex = rgbToHex(`rgb(${Math.round((sR * i + startR))},${Math.round((sG * i + startG))},${Math.round((sB * i + startB))})`) // 确保第一个颜色值为startColor的值 if (i === 0) hex = rgbToHex(startColor) // 确保最后一个颜色值为endColor的值 if (i === step - 1) hex = rgbToHex(endColor) colorArr.push(hex) } return colorArr } // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式) function hexToRgb(sColor, str = true) { const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/ sColor = String(sColor).toLowerCase() if (sColor && reg.test(sColor)) { if (sColor.length === 4) { let sColorNew = '#' for (let i = 1; i < 4; i += 1) { sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)) } sColor = sColorNew } // 处理六位的颜色值 const sColorChange = [] for (let i = 1; i < 7; i += 2) { sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`)) } if (!str) { return sColorChange } return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})` } if (/^(rgb|RGB)/.test(sColor)) { const arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',') return arr.map((val) => Number(val)) } return sColor } // 将rgb表示方式转换为hex表示方式 function rgbToHex(rgb) { const _this = rgb const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/ if (/^(rgb|RGB)/.test(_this)) { const aColor = _this.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(',') let strHex = '#' for (let i = 0; i < aColor.length; i++) { let hex = Number(aColor[i]).toString(16) hex = String(hex).length == 1 ? `${0}${hex}` : hex // 保证每个rgb的值为2位 if (hex === '0') { hex += hex } strHex += hex } if (strHex.length !== 7) { strHex = _this } return strHex } if (reg.test(_this)) { const aNum = _this.replace(/#/, '').split('') if (aNum.length === 6) { return _this } if (aNum.length === 3) { let numHex = '#' for (let i = 0; i < aNum.length; i += 1) { numHex += (aNum[i] + aNum[i]) } return numHex } } else { return _this } } /** * JS颜色十六进制转换为rgb或rgba,返回的格式为 rgba(255,255,255,0.5)字符串 * sHex为传入的十六进制的色值 * alpha为rgba的透明度 */ function colorToRgba(color, alpha) { color = rgbToHex(color) // 十六进制颜色值的正则表达式 const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/ /* 16进制颜色转为RGB格式 */ let sColor = String(color).toLowerCase() if (sColor && reg.test(sColor)) { if (sColor.length === 4) { let sColorNew = '#' for (let i = 1; i < 4; i += 1) { sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)) } sColor = sColorNew } // 处理六位的颜色值 const sColorChange = [] for (let i = 1; i < 7; i += 2) { sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`)) } // return sColorChange.join(',') return `rgba(${sColorChange.join(',')},${alpha})` } return sColor } export default { colorGradient, hexToRgb, rgbToHex, colorToRgba }