Je suis occupé à répondre aux besoins des entreprises récemment et je n'ai pas écrit de blog depuis longtemps. J'ai un peu de temps aujourd'hui et j'ai regardé certains des codes frontaux dans les projets récents. Lorsque j'ai vu la fonction de conversion des couleurs Web, j'ai soudainement pensé que lorsque nous faisions des paramètres de couleur / des exigences d'édition, il impliquait souvent un échange de différents formats de valeur de couleur. J'ai donc décidé d'enregistrer comment j'ai mis en œuvre cette partie de la fonction, la noter et la partager avec vous, et j'espère que les lecteurs exprimeront leurs opinions et communiqueront davantage.
Regardez le problème en premier
Question 1. Lorsque nous développons la page Web frontale, nous utilisons souvent DOM.Style.backgroundColor = "# F00" pour définir la couleur d'arrière-plan d'un élément DOM. Nous utiliserons également le code similaire (pourquoi est le même? Il y a de nombreux cas, nous pouvons donc utiliser librement notre imagination ici) var bgc = dom.style.backgroundColor pour obtenir la couleur d'arrière-plan d'un élément DOM. La question est donc de voir l'image ci-dessous:
Si la comparaison ici n'est pas assez évidente, continuons à regarder:
De toute évidence, la même valeur de couleur devrait être égale, mais le résultat ne l'est pas. Ce n'est pas un cas isolé. Les résultats que j'obtiens dans les outils de développement Chrome et la console Firefox sont les mêmes.
Question 2: Le développement frontal commence souvent par la restauration du projet de conception de l'interface utilisateur. Pendant le processus de codage, nous trouvons souvent une telle conception: une couleur solide de fond de boîte (en supposant: # F00), mais avec une opacité de 75%. De toute évidence, nous ne pouvons pas simplement définir cette situation via dom.style.backgroundcolor = "# f00" car l'effet translucide ne peut pas être réalisé. Au fur et à mesure que nous nous retournons, nous savons qu'il y a une chose RGBA dans CSS3, ce qui signifie que nous pouvons définir une couleur d'arrière-plan translucide via Dom.Style.backgroundColor = "RGBA (255, 0, 0, 0,75)" de cette manière. Ensuite, la question est à nouveau: cette conversion est facile à faire dans Photoshop, mais si nous sommes en JavaScript, comment devrions-nous convertir ("# f00", 75) en RGBA (255, 0, 0, 0,75)?
Ensuite, voyons comment je le fais.
RVB (A) Valeur de couleur convertie en couleur hexadécimale (hex)
Ils sont tous pour le développement, nous comprenons! Il vaut mieux télécharger le code directement, mais voici un morceau de l'original:
<! - Lang: JS ->
La copie de code est la suivante:
var rgbtohex = fonction (rgb) {
var rrgb = / rgb / ((/ d {1,3}), (/ d {1,3}), (/ d {1,3}) /) /,
rrgba = /rgba/( (/d {1,3 }), (/d {1,3 }), (/d {1,3 }), (·/d.
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, alpha: 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, alpha: math.ceil (a)};
} autre {
return {hex: rgb, alpha: 100};
}
};
Pourquoi est-ce le plus primitif? Parce que lorsque je passe en revue le code aujourd'hui, j'ai constaté qu'il y avait encore de la place pour l'évolution ici. Comparons le code évolué (optimisé):
<! - Lang: JS ->
La copie de code est la suivante:
var rgbtohex = fonction (rgb) {
var rrgba = /rgba?/( (/d {1,3 }), (/d {1,3 }), (/d {1,3 })(, (./d.
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, alpha: math.ceil (a)};
} autre {
return {hex: rgb, alpha: 100};
}
};
Sans oublier qu'il y en a un si la branche manque, il est évident du point de vue du seul volume de code! Ensuite, voyons si le résultat de la conversion est comme nous le souhaitons, et pour cela, j'ai exécuté quelques lignes de code indiquées dans la figure suivante dans la console:
À en juger par les résultats de l'exécution, notre méthode semble avoir atteint notre objectif. Cependant, des amis prudents doivent remarquer qu'il y a deux flèches rouges sur l'image. Y a-t-il des pièges ici? bien. Examinons de plus près le paramètre de couleur RVB (255, 0, 0, 2) passé dans la première flèche. En fait, ce n'est pas une valeur de couleur légale. La valeur de couleur au format RVB n'a pas le quatrième paramètre (transparence); Regardez ensuite la deuxième flèche RGBA (255, 0, 0, 1,48) dans la deuxième flèche. Il n'y a aucun problème avec le format ici, mais la transparence est de 1,48, ce qui n'est en fait pas une valeur de transparence légale. Notre méthode a été exécutée normalement et retournée normalement, indiquant que notre méthode a encore de la place pour une évolution supplémentaire, nous laisserons donc tout le monde pour jouer!
Convertir la couleur hexagonale (hex) au format RGBA
Dans le développement quotidien, la valeur des couleurs que nous utilisons le plus souvent devrait être la valeur de la couleur au format hexadécimal (# FF0000, # F00, etc.). Si nous devons le convertir au format RGBA lors de l'utilisation des valeurs de couleur, que devons-nous faire?
<! - Lang: JS ->
La copie de code est la suivante:
var hextorgba = fonction (hex, al) {
var hexcolor = /^#/.test(hex)? Hex.Slice (1): Hex,
alp = hex === 'transparent'? 0: math.ceil (al),
R, G, B;
hexcolor = /^_0-9a-f hexcolor: «ffffff»;
if (hexcolor.length === 3) {
hexcolor = hexcolor.replace (/ (/ w) (/ w) (/ w) / gi, '1 $ $ $ 2 $ 2 $ 2 $ 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);
retour {
Hex: '#' + hexcolor,
alpha: alp,
rgba: 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixed (2) + ')'
};
};
De même, nous écrivons également un code de vérification pour tester si notre conversion est normale:
À en juger par les résultats de l'exécution, notre méthode n'a aucun problème et peut obtenir les résultats de conversion que nous voulons. Mais ici, nous laissons toujours deux flèches rouges, la transparence illégale et les valeurs de couleurs illégales. Cette partie de la fonction évolutive est également laissée pour tout le monde, haha ...
Enfin, la conversion mutuelle entre les valeurs de couleur de la page Web est en fait un problème de cliché. Je viens d'en énumérer l'un d'eux ici. Je crois qu'il existe des méthodes plus et meilleures à utiliser. Tout le monde est invité à le proposer, à communiquer et à progresser ensemble ~~