/** * 求两个颜色之间的渐变值 * @param {string} startColor 开始的颜色 * @param {string} endColor 结束的颜色 * @param {number} step 颜色等分的份额 * */ function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) { let startRGB = hexToRgb(startColor, false); //转换为rgb数组模式 let startR = startRGB[0]; let startG = startRGB[1]; let startB = startRGB[2]; let endRGB = hexToRgb(endColor, false); let endR = endRGB[0]; let endG = endRGB[1]; let endB = endRGB[2]; let sR = (endR - startR) / step; //总差值 let sG = (endG - startG) / step; let sB = (endB - startB) / step; let 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)) + ')'); colorArr.push(hex); } return colorArr; } // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式) function hexToRgb(sColor, str = true) { let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; sColor = 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; } //处理六位的颜色值 let sColorChange = []; for (let i = 1; i < 7; i += 2) { sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2))); } if(!str) { return sColorChange; } else { return `rgb(${sColorChange[0]},${sColorChange[1]},${sColorChange[2]})`; } } else if (/^(rgb|RGB)/.test(sColor)) { let arr = sColor.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",") return arr.map(val => Number(val)); } else { return sColor; } }; // 将rgb表示方式转换为hex表示方式 function rgbToHex(rgb) { let _this = rgb; let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; if (/^(rgb|RGB)/.test(_this)) { let 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; } else if (reg.test(_this)) { let aNum = _this.replace(/#/, "").split(""); if (aNum.length === 6) { return _this; } else 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; } } export default { colorGradient, hexToRgb, rgbToHex }