从ARBG到RGBA
2022-09-18 本文已影响0人
景阳冈大虫在此
前言
遇到一个情况,需要把客户端用的色值ARBG用在前端。
![](https://img.haomeiwen.com/i7792325/304f259e670b3c2d.png)
ARBG格式的颜色直接填入background是这个效果。
原因是因为,在css里八位的色值为RGBA
![](https://img.haomeiwen.com/i7792325/fe2938064ddbe76a.png)
![](https://img.haomeiwen.com/i7792325/80349d04b38a6d01.png)
其实不看文档也能隐隐觉得不对劲,因为在chrome是这样的
![](https://img.haomeiwen.com/i7792325/ec5a0082ed6d8569.png)
![](https://img.haomeiwen.com/i7792325/04e9995038025b2c.png)
因为#FF1A71FF的透明度是FF。
透明度越小越透明,越大越不透明。0xFF是十进制的255,代表不透明,所以这个色值直接去掉透明度,RGB为#1A71FF
![](https://img.haomeiwen.com/i7792325/ab4a936d76e361c2.png)
ARBG到RGBA
经过上面的分析,解法很简单了,反正css的color是支持16进制的八位色值的,那就把AARRBBGG换成RRBBGGAA好了。
特别地
RGBA可以为4位,这样一个字母代表一个通道。
就像#FFF代表#FFFFFF一样,照样用那个还没修改的RGBA组件证实一下。
![](https://img.haomeiwen.com/i7792325/5949cc5f32a3b4aa.png)
![](https://img.haomeiwen.com/i7792325/c4514f094f1142b0.png)
chrome转换的结果是完全一致的。
效果
![](https://img.haomeiwen.com/i7792325/28488f457f797207.png)
修改透明度
![](https://img.haomeiwen.com/i7792325/d6a3e1d6c66f8957.png)
代码
/* eslint-disable react/no-array-index-key */
import { Input } from 'antd';
import { useMemo } from 'react';
import $styles from './style.module.less';
interface PropsType {
onChange?: () => void;
value?: string;
}
/** 用于输入颜色的Input */
export default function (props: PropsType) {
const { value = '', onChange } = props;
const maskColor = useMemo(() => {
if (!value && value.length !== 9 && value.length !== 5) return '';
if (value.length === 5) {
return `#${value[2]}${value[3]}${value[4]}${value[1]}`;
}
if (value.length === 9) {
return `#${value[3]}${value[4]}${value[5]}${value[6]}${value[7]}${value[8]}${value[1]}${value[2]}`;
}
return value;
}, [value]);
return (
<div className={$styles.ColorInput}>
<Input
placeholder="请输入颜色"
value={value}
onChange={onChange}
style={{
width: '100px',
borderBottom: '1px solid #eee',
marginRight: '5px',
}}
bordered={false}
/>
<div className={$styles.colorArea} >
<div className={$styles.mask} style={{ background: maskColor }} />
{value && Array(25).fill(0).map((_, key) => <div className={$styles.square} key={key} />)}
</div>
</div>
);
}
// style.module.less
.ColorInput {
display: flex;
.colorArea {
position: relative;
width: 30px;
height: 30px;
border: 1px solid #eee;
border-radius: 9px;
display: flex;
flex-wrap: wrap;
overflow: hidden;
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.square {
width: 20%;
height: 20%;
&:nth-child(odd) {
background: rgba(0, 0, 0, 0.15);
}
}
}
}
参考: