标签：颜色 函数 color param return var Alpha 工具 colorNew

颜色转换

import { normal } from 'color-blend'
/**
 *  @description 将16进制色号转换成rgb:{r,g,b,a}
 *  @param {string} color
 *  @param {float} Alpha
 *  @return {object}
 */
function colorRgbObj(color, Alpha = 1) {
    color = color.toLowerCase()
    var pattern = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/u
    if (color && pattern.test(color)) {
        // 处理六位的颜色值
        var colorNew = []
        for (var i = 1; i < 7; i += 2) {
            colorNew.push(parseInt('0x' + color.slice(i, i + 2)))
        }
        return { r: colorNew[0], g: colorNew[1], b: colorNew[2], a: Alpha }
    }
    return color
}

/**
 * scss mix 函数
 * @param {string} colorA 16进制色号
 * @param {string} colorB 16进制色号
 * @param {*} Alpha
 * @returns rgba
 */
export function colorMixer(colorA, colorB, Alpha) {
    var rgbA = colorRgbObj(colorA, 1 - Alpha)
    var rgbB = colorRgbObj(colorB, 1 - Alpha)
    const { r, g, b, a } = normal(rgbA, rgbB)
    return `rgba(${r},${g},${b},${a})`
}


/**
 *  @description 将16进制色号转换成rgba
 *  @param {string} color
 *  @param {float} Alpha
 *  @return {string}
 */
export function colorRgb(color, Alpha = 1) {
    color = color.toLowerCase()
    var pattern = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/u
    if (color && pattern.test(color)) {
        if (color.length === 4) {
            // 将三位转换为六位
            color = '#' + color[1] + color[1] + color[2] + color[2] + color[3] + color[3]
        }
        // 处理六位的颜色值
        var colorNew = []
        for (var i = 1; i < 7; i += 2) {
            colorNew.push(parseInt('0x' + color.slice(i, i + 2)))
        }
        return `RGBA(${colorNew.join(',')} , ${Alpha})`
    }
    return color
}

标签：颜色,函数,color,param,return,var,Alpha,工具,colorNew
来源： https://www.cnblogs.com/gongxiansheng/p/16547288.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。