js:关于颜色处理的一些常用函数

发布于:2024-06-05 ⋅ 阅读:(111) ⋅ 点赞:(0)

解析字符串css样式

const themeColor = `
    --btn-radius: 44rpx;
    --theme-color: #41c2a6;
    --theme-color-op: rgba(55, 176, 172, 0.3);
    `
/**
 * 根据key获取value
 * @param {string} themeColor 
 * @param {string} key 
 * @returns value
 */
const getThemeColor = (themeColor, key) => {
  const reg = new RegExp(`${key}:(.+?)\;`);
  const themeColorStr = themeColor.match(reg)[0]
  const newStr = themeColorStr.slice(key.length + 1, themeColorStr.length - 1)
  return newStr.trim()
}

getThemeColor(themeColor, '--theme-color') // #41c2a6

rgb转换为hex

const setRgbTo16 = (str) => {
  if (str.includes('#')) {
    return str
  }
  let reg = /^(rgb|RGB)/;
  if(!reg.test(str)){return;}
  var arr = str.slice(4, str.length-1).split(",")
  let color = '#';
  for(var i=0;i<arr.length;i++){
       var t = Number(arr[i]).toString(16)
       if(t == "0"){   //如果为“0”的话,需要补0操作,否则只有5位数
           t =  t + "0"
       }
       color += t;
  }
  return color;
}

hex转换为rgba

function hexToRgba(hex, alpha) {  
    // 确保传入的alpha值在0到1之间  
    alpha = Math.max(0, Math.min(alpha, 1));  
  
    // 去除hex字符串前面的#号(如果有的话)  
    hex = hex.replace('#', '');  
  
    // 检查hex字符串的长度,如果是3位则转换为6位  
    if (hex.length === 3) {  
        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];  
    }  
  
    // 将hex字符串拆分为r、g、b三个部分  
    const r = parseInt(hex.slice(0, 2), 16);  
    const g = parseInt(hex.slice(2, 4), 16);  
    const b = parseInt(hex.slice(4, 6), 16);  
  
    // 返回一个rgba字符串  
    return `rgba(${r}, ${g}, ${b}, ${alpha.toFixed(2)})`;  
}  
  
// 使用示例  
const rgbaString = hexToRgba('#ff0000', 0.5);  
console.log(rgbaString); // 输出 "rgba(255, 0, 0, 0.50)"