js-utils-chs/src/colorGradient.js

自定义工具函数库

/**
 * RGB转十六进制Hex
 * 该函数可以将一个RGB颜色值转换成一个Hex的十六进制颜色值
 * @param {String} rgb  RGB颜色值，如rgb(230, 231, 233)
 * @returns 
 */
export 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); //转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++) {
                numHex += (aNum[i] + aNum[i])
            }
            return numHex;
        }
    } else {
        return _this;
    }
}

/**
 *  十六进制Hex转RGB
 * 该函数可以将一个Hex的十六进制颜色值转换成一个RGB颜色值
 * @param {String} sColor HEx颜色值，如#0afdce
 * @param {Boolean} str 决定该函数返回的是数组还是 rgb值
 * @returns 
 */
export 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 = 0; i < 4; i++) {
                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
    }
}

/**
 * 颜色渐变
 * 该函数实现两个颜色值之间等分取值，返回一个数组，元素为十六进制形式的颜色值，数组长度为step值。 例如：colorGradient('rgb(250, 250, 250)', 'rgb(252, 252, 252)', 3)，得到的结果为["#fafafa", "#fafafa", "#fbfbfb"]
 * @param {String} startColor 开始颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
 * @param {String} endColor 结束颜色值，可以是HEX或者RGB颜色值，如#0afdce或者rgb(120, 130, 150)
 * @param {Number} step 均分值，把开始值和结束值平均分成多少份
 * @returns 
 */
export function colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) {
    let startRGB = hexToRgb(startColor, false);
    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
}

/**
 * 颜色透明度
 * 该函数可以接受一个十六进制或者rgb格式的颜色值(不能接受命名式颜色格式，比如white)，返回此颜色的rgba格式值
 * @param {String} color  颜色值，只能hex或者rgba格式
 * @param {Number} alpha  不透明度值，取值为0-1之间
 * @returns 
 */
export function colorToRgba(color, alpha = 0.3) {
    alpha = alpha > 1 ? 1 : alpha;
    color = rgbToHex(color);
    // 十六进制颜色值的正则表达式
    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    /* 16进制颜色转为RGB格式 */
    let sColor = 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;
        }
        // 处理六位的颜色值
        let 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 + ')';
    }
    else {
        return sColor;
    }
}