Ich war in letzter Zeit damit beschäftigt, Geschäftsanforderungen zu erfüllen und seit langem keinen Blog mehr zu schreiben. Ich habe heute ein wenig Zeit und habe mir einige der Front-End-Codes in jüngsten Projekten angesehen. Als ich die Funktion der Web -Farbkonvertierung sah, dachte ich plötzlich, dass wir bei einigen Farbeinstellungen/Bearbeitungsanforderungen häufig den Austausch verschiedener Farbwertformate beinhalteten. Deshalb habe ich beschlossen, aufzuzeichnen, wie ich diesen Teil der Funktion implementiert habe, ihn aufschreiben und mit Ihnen teilen und hoffen, dass die Leser ihre Meinungen äußern und mehr kommunizieren.
Schauen Sie sich zuerst das Problem an
Frage 1. Wenn wir die Front-End-Webseite entwickeln, verwenden wir häufig Dom.style.backgroundcolor = "#f00", um die Hintergrundfarbe eines DOM-Elements festzulegen. Wir werden den Code auch ähnlich verwenden (warum ist es gleich? Es gibt viele Fälle, sodass wir unsere Vorstellungskraft hier frei verwenden können) var bgc = dom.style.backgroundColor, um die Hintergrundfarbe eines DOM -Elements zu erhalten. Die Frage ist also, siehe das Bild unten:
Wenn der Vergleich hier nicht offensichtlich genug ist, schauen wir weiter nach:
Offensichtlich sollte der gleiche Farbwert gleich sein, aber das Ergebnis ist nicht. Dies ist kein Einzelfall. Die Ergebnisse, die ich in Tools für die Chromentwicklung und die Firefox -Konsole erzielte, sind gleich.
Frage 2: Front-End-Entwicklung beginnt häufig mit der Wiederherstellung des UI-Designentwurfs. Während des Codierungsprozesses finden wir häufig ein solches Design: eine feste Farbfarbe des Kastenhintergrunds (Annahme: #F00), jedoch mit einer Deckkraft von 75%. Offensichtlich können wir diese Situation nicht einfach durch Dom.style.backgroundcolor = "#f00" festlegen, da der durchscheinende Effekt nicht erreicht werden kann. Während wir uns umdrehen, wissen wir, dass es in CSS3 eine RGBA -Sache gibt, was bedeutet, dass wir auf diese Weise eine durchscheinende Hintergrundfarbe durch Dom.style.backgroundColor = "RGBA (255, 0, 0, 0,75)" auf diese Weise festlegen können. Dann ist die Frage erneut: Diese Konvertierung ist in Photoshop einfach, aber wenn wir in JavaScript sind, wie sollten wir ("#f00", 75) in RGBA (255, 0, 0, 0,75) konvertieren?
Lassen Sie uns als nächstes sehen, wie ich es mache.
RGB (a) Farbwert in Sechskantfarbe umgewandelt (Hex)
Sie sind alle für die Entwicklung, verstehen wir! Es ist besser, den Code direkt hochzuladen, aber hier ist ein Stück der Original:
<!-Lang: JS->
Die Codekopie lautet wie folgt:
var rgBtohex = function (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,,
rrgba = /rgba/(ink
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)};
} anders {
return {hex: rgb, alpha: 100};
}
};
Warum ist es das primitivste? Denn als ich den Code heute überprüfe, stellte ich fest, dass hier noch Platz für die Evolution gibt. Vergleichen wir den entwickelten (optimierten) Code:
<!-Lang: JS->
Die Codekopie lautet wie folgt:
var rgBtohex = function (rgb) {
var rrgba = /rgba?/(/d </des1,3}) ,(/d <.1,3}),(/d <,3}) ((,( -7./d weibliche+)?/)/,,,
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)};
} anders {
return {hex: rgb, alpha: 100};
}
};
Ganz zu schweigen davon, dass ein Zweig fehlt, sondern aus der Perspektive des Codevolumens offensichtlich! Als nächstes sehen wir uns an, ob das Konvertierungsergebnis so ist, wie wir es wünschen, und dafür habe ich einige Codezeilen ausgeführt, die in der folgenden Abbildung in der Konsole gezeigt sind:
Nach den Ausführungsergebnissen scheint unsere Methode unser Ziel erreicht zu haben. Sorgfältige Freunde sollten jedoch feststellen, dass zwei rote Pfeile auf dem Bild sind. Gibt es hier irgendwelche Fallstricke? Gut. Schauen wir uns den Farbparameter RGB (255, 0, 0, 2) im ersten Pfeil genauer an. Tatsächlich ist dies kein rechtlicher Farbwert. Der Farbwert im RGB -Format hat nicht den vierten (Transparenz-) Parameter; Schauen Sie sich dann den zweiten Pfeil RGBA (255, 0, 0, 1,48) im zweiten Pfeil an. Hier gibt es kein Problem mit dem Format, aber die Transparenz beträgt 1,48, was eigentlich kein rechtlicher Transparenzwert ist. Unsere Methode wurde normal ausgeführt und normal zurückgegeben, was darauf hinweist, dass unsere Methode immer noch Raum für die weitere Entwicklung hat. Daher überlassen wir es allen zur Durchführung!
Wenden Sie die Hex -Farbe (Hex) in das RGBA
In der täglichen Entwicklung sollte der Farbwert, den wir am häufigsten verwenden, der Farbwert im hexadezimalen Format ( #ff0000, #f00 usw.) sein. Wenn wir es bei der Verwendung von Farbwerten in das RGBA -Format konvertieren müssen, was sollen wir dann tun?
<!-Lang: JS->
Die Codekopie lautet wie folgt:
var hextorgba = function (hex, al) {
var hexcolor = /^#/.test(hex)? hex.lice (1): hex,
ALP = hex === 'transparent'? 0: math.ceil (al),
r, g, b;
hexcolor = /^..0-9a-f wl. {3 }| · 0-9a-f] <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 = parsesint (r, 16);
g = parsesint (g, 16);
B = Parseint (B, 16);
zurückkehren {
Hex: '#' + Hexcolor,
Alpha: ALP,
RGBA: 'RGBA (' + R + ',' + G + ',' + B + ',' + (ALP / 100) .ToFixed (2) + ')' '
};
};
In ähnlicher Weise schreiben wir auch einen Verifizierungscode, um zu testen, ob unsere Konvertierung normal ist:
Nach den Ausführungsergebnissen zu urteilen, hat unsere Methode kein Problem und kann die gewünschten Konversionsergebnisse erhalten. Aber hier hinterlassen wir immer noch zwei rote Pfeile, illegale Transparenz und illegale Farbwerte. Dieser Teil der evolutionären Funktion bleibt auch für alle übrig, haha ...
Schließlich ist die gegenseitige Konvertierung zwischen den Farbwerten von Webseiten tatsächlich ein Klischeesproblem. Ich habe gerade einen von ihnen hier aufgeführt. Ich glaube, es gibt mehr und bessere Methoden zu verwenden. Jeder ist herzlich eingeladen, es vorzuschlagen, zu kommunizieren und gemeinsam Fortschritte zu machen ~~