ColorPicker 颜色选择器处理rgba

最新推荐文章于 2024-05-28 09:32:08 发布

前端小溪

最新推荐文章于 2024-05-28 09:32:08 发布

阅读量1.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_44952258/article/details/106088789

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

ColorPicker 颜色选择器处理rgba

颜色rgba转对象或数组

目标: 通过传参方式,返回处理过的数据, 参数类型可以是string字符串,也可以是数组,具体可转格式如下

string字符串转对象

rgba(153, 5, 5, 1) 转化为
color: {
    r: '153',
    g: '5',
    b: '5',
    a: '1'
}

字符串数组转对象数组

 [ 'rgba(153, 5, 5, 1)', 'rgba(153, 5, 5, 1)' ] 转化为
[
	{
		r: 153,
		g: 5, 
		b: 5, 
		a: 1 
	},
	{
		r: 153,
		g: 5, 
		b: 5, 
		a: 1 
   }
]

代码部分


/**
 * rgba(153, 5, 5, 1)转 { r: 153, g: 5, b: 5, a: 1 }
 * rgba处理函数
 * @params {*} string/Array => obj/Array
 */

export const colorObj = (str) => {
  let obj = {};
  let arr = [];
  if (str) {
    if (Object.prototype.toString.call(str) === "[object Array]") { //判断数据类型
      for (let key in str) {
        let strArr = [];
        let strObj = {};
        strArr = str[key]
          .split("(")[1]
          .split(")")[0]
          .split(","); // 将rgba分割成数组
        strObj.r = Number(strArr[0].trim());
        strObj.g = Number(strArr[1].trim());
        strObj.b = Number(strArr[2].trim());
        strObj.a = Number(strArr[3].trim());
        arr.push(strObj);
      }
      return arr;
    } else {
      arr = str
        .split("(")[1]
        .split(")")[0]
        .split(",");
      if (arr.length == 4) {
        obj.r = Number(arr[0].trim());
        obj.g = Number(arr[1].trim());
        obj.b = Number(arr[2].trim());
        obj.a = Number(arr[3].trim());
      } else {
        return str; // 传参有误处理
      }
    }
    return obj;
  } else {
    return str; // 传null处理
  }
};

对象或数组转颜色rgba

通过传参方式,返回处理过的数据, 参数类型可以是string字符串,也可以是数组,具体可转格式如下

对象转string字符串

color: {
    r: '153',
    g: '5',
    b: '5',
    a: '1'
}  
转化为
rgba(153, 5, 5, 1)

对象数组转字符串数组

[
	{
		r: 153,
		g: 5, 
		b: 5, 
		a: 1 
	},
	{
		r: 153,
		g: 5, 
		b: 5, 
		a: 1 
   }
]
转化为
 [ 'rgba(153, 5, 5, 1)', 'rgba(153, 5, 5, 1)' ]

代码部分

/**
 * { r: 153, g: 5, b: 5, a: 1 } 转 rgba(153, 5, 5, 1)
 * [{ r: 153, g: 5, b: 5, a: 1 },{ r: 153, g: 5, b: 5, a: 1 }] 转 ['rgba(153, 5, 5, 1)','rgba(153, 5, 5, 1)']
 * rgba处理函数
 * @params {*} obj => str
 */

export const colorStr = (obj) => {
  let arr = [];
  if (obj) {
    if (Object.prototype.toString.call(obj) === "[object Array]") {
        for(let key in obj) {
            arr.push(`rgba(${obj[key].r},${obj[key].g},${obj[key].b},${obj[key].a})`)
        }
        return arr;
    } else {
      return `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`;
    }
  } else {
    return obj;
  }
};