颜色工具函数

本文主要是介绍颜色工具函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

颜色转换

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
}

这篇关于颜色工具函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！