Estou ocupado concluindo as necessidades de negócios recentemente e não escrevo um blog há muito tempo. Hoje tenho um pouco de tempo e olhei para alguns dos códigos de front-end em projetos recentes. Quando vi a função de conversão de cores da Web, de repente pensei que, quando estávamos fazendo alguns requisitos de configurações/edição de cores, ela geralmente envolvia intercâmbio de vários formatos de valor de cor. Por isso, decidi gravar como implementei essa parte da função, anote -a e compartilhe -a com você e espero que os leitores expressem suas opiniões e comuniquem mais.
Veja o problema primeiro
Pergunta 1. Quando estamos desenvolvendo a página da web front-end, geralmente usamos dom.style.backgroundColor = "#f00" para definir a cor de fundo de um elemento DOM. Também usaremos o código semelhante (por que é o mesmo? Existem muitos casos, para que possamos usar livremente nossa imaginação aqui) var bgc = dom.style.backgroundColor para obter a cor de fundo de um elemento DOM. Portanto, a pergunta é: veja a foto abaixo:
Se a comparação aqui não for óbvia o suficiente, vamos continuar olhando:
Obviamente, o mesmo valor de cor deve ser igual, mas o resultado não é. Este não é um caso isolado. Os resultados que recebo nas ferramentas de desenvolvimento do Chrome e no console do Firefox são os mesmos.
Pergunta 2: O desenvolvimento do front-end geralmente começa com a restauração do rascunho de design da interface do usuário. Durante o processo de codificação, geralmente encontramos esse design: uma cor de fundo de fundo da caixa (assumindo: #F00), mas com 75% de opacidade. Obviamente, não podemos simplesmente definir essa situação através do dom.style.backgroundColor = "#f00" porque o efeito translúcido não pode ser alcançado. Quando nos virarmos, sabemos que existe uma coisa do RGBA no CSS3, o que significa que podemos definir uma cor de fundo translúcida através do dom.style.backgroundColor = "RGBA (255, 0, 0, 0,75)" dessa maneira. Então, a pergunta é novamente: essa conversão é fácil de fazer no Photoshop, mas se estivermos em JavaScript, como devemos converter ("#F00", 75) em RGBA (255, 0, 0, 0,75)?
Em seguida, vamos ver como eu faço isso.
RGB (a) Valor da cor convertido em cor hexadecimal (hexadecimal)
Eles são todos para desenvolvimento, entendemos! É melhor fazer o upload diretamente do código, mas aqui está um pedaço do original:
<!-Lang: JS->
A cópia do código é a seguinte:
var rgbtohex = função (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,
rrgba = /rgba/(/d {1,3 }) ,(/d {1,3 }) ,(/d {1,3a aca Única
r, g, b, a, rs = rgb.replace (// s+/g, "") .match (rrgb),
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rs) {
r = (+rs [1]). ToString (16);
r = r.Length == 1? "0" + r: r;
g = (+rs [2]). ToString (16);
g = g.Length == 1? "0" + g: g;
b = (+rs [3]). ToString (16);
b = b.Length == 1? "0" + b: b;
return {hex: "#" + r + g + b, alfa: 100};
} else if (rsa) {
r = (+rsa [1]). ToString (16);
r = r.Length == 1? "0" + r: r;
g = (+rsa [2]). ToString (16);
g = g.Length == 1? "0" + g: g;
b = (+rsa [3]). ToString (16);
b = b.Length == 1? "0" + b: b;
a = (+rsa [4]) * 100
return {hex: "#" + r + g + b, alfa: math.ceil (a)};
} outro {
return {hex: rgb, alfa: 100};
}
};
Por que é o mais primitivo? Porque quando reviso o código hoje, descobri que ainda há espaço para a evolução aqui. Vamos comparar o código evoluído (otimizado):
<!-Lang: JS->
A cópia do código é a seguinte:
var rgbtohex = função (rgb) {
var rrgba = /rgba?/(/d {1,3 }) ,(/d {1,3 }) ,(/d {1,3a Única
R, G, B, A
rsa = rgb.replace (// s+/g, "") .match (rrgba);
if (rsa) {
r = (+rsa [1]). ToString (16);
r = r.Length == 1? "0" + r: r;
g = (+rsa [2]). ToString (16);
g = g.Length == 1? "0" + g: g;
b = (+rsa [3]). ToString (16);
b = b.Length == 1? "0" + b: b;
a = (+(rsa [5]? RSA [5]: 1)) * 100
return {hex: "#" + r + g + b, alfa: math.ceil (a)};
} outro {
return {hex: rgb, alfa: 100};
}
};
Sem mencionar que está faltando uma ramificação, é óbvio da perspectiva do volume de código sozinho! Em seguida, vamos ver se o resultado da conversão é como desejamos e, para isso, executei algumas linhas de código mostradas na figura a seguir no console:
A julgar pelos resultados da execução, nosso método parece ter atingido nosso objetivo. No entanto, amigos cuidadosos devem perceber que existem duas setas vermelhas na foto. Há alguma armadilha aqui? bom. Vamos dar uma olhada no parâmetro de cor RGB (255, 0, 0, 2) passou na primeira seta. De fato, esse não é um valor legal de cor. O valor da cor no formato RGB não possui o quarto parâmetro (transparência); Em seguida, observe a segunda seta RGBA (255, 0, 0, 1.48) na segunda seta. Não há problema com o formato aqui, mas a transparência é de 1,48, o que na verdade não é um valor de transparência legal. Nosso método foi executado normalmente e devolvido normalmente, indicando que nosso método ainda tem espaço para uma evolução adicional, por isso deixaremos que todos realizem!
Converter cor hexadecimal (hexadecimal) em formato RGBA
No desenvolvimento diário, o valor da cor que usamos com mais frequência deve ser o valor da cor no formato hexadecimal ( #FF0000, #F00, etc.). Se precisarmos convertê -lo em formato RGBA ao usar valores de cores, o que devemos fazer?
<!-Lang: JS->
A cópia do código é a seguinte:
var hextorgba = function (hex, al) {
var hexcolor = /^#/.test(hex)? hex.slice (1): hexadecimal,
alp = hex === 'transparente'? 0: Math.ceil (Al),
R, G, B;
hexcolor = /^0-9a-f] {3}| ..0-9a-f] {6}$/i.test(hexcolor)? hexcolor: 'ffffff';
if (hexcolor.length === 3) {
hexcolor = hexcolor.replace (/(/w) (/w) (/w)/gi, '$ 1 $ 1 $ 2 $ 2 $ 3 $ 3');
}
r = hexcolor.slice (0, 2);
g = hexcolor.slice (2, 4);
b = hexcolor.slice (4, 6);
r = parseint (r, 16);
g = parseint (G, 16);
b = parseint (b, 16);
retornar {
Hex: '#' + hexcolor,
alfa: alp,
rgba: 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixado (2) + ')'
};
};
Da mesma forma, também escrevemos um código de verificação para testar se nossa conversão é normal:
A julgar pelos resultados da execução, nosso método não tem problema e pode obter os resultados de conversão que queremos. Mas aqui ainda deixamos duas setas vermelhas, transparência ilegal e valores ilegais de cores. Esta parte da função evolutiva também é deixada para todos, haha ...
Finalmente, a conversão mútua entre os valores da cor da página da web é na verdade um problema de clichê. Acabei de listar um deles aqui. Eu acredito que existem métodos mais e melhores para usar. Todos são bem -vindos para propor, comunicar e progredir juntos ~~