لقد كنت مشغولاً بإكمال احتياجات العمل مؤخرًا ولم أكتب مدونة لفترة طويلة. لدي القليل من الوقت اليوم ونظرت إلى بعض الرموز الأمامية في المشاريع الحديثة. عندما رأيت وظيفة تحويل لون الويب ، اعتقدت فجأة أنه عندما كنا نقوم ببعض متطلبات إعدادات الألوان/التحرير ، فإنها تتضمن غالبًا تبادلًا لتنسيقات قيمة الألوان المختلفة. لذلك قررت تسجيل كيفية تنفيذ هذا الجزء من الوظيفة ، واكتبها ومشاركتها معك ، وآمل أن يعبر القراء عن آرائهم ويتواصلون أكثر.
انظر إلى المشكلة أولاً
السؤال 1. عندما نقوم بتطوير صفحة الويب الأمامية ، نستخدم غالبًا dom.style.backgroundColor = "#F00" لتعيين لون الخلفية لعنصر DOM. سنستخدم الرمز المتماثل أيضًا (لماذا هو نفسه؟ هناك العديد من الحالات ، لذلك يمكننا استخدام خيالنا بحرية هنا) var bgc = dom.style.backgroundColor للحصول على لون خلفية عنصر DOM. لذا فإن السؤال هو ، يرجى الاطلاع على الصورة أدناه:
إذا كانت المقارنة هنا غير واضحة بما فيه الكفاية ، فلنستمر في البحث:
من الواضح أن قيمة اللون نفسها يجب أن تكون متساوية ، لكن النتيجة ليست كذلك. هذه ليست حالة معزولة. النتائج التي أحصل عليها في أدوات تطوير Chrome و Firefox Console هي نفسها.
السؤال 2: غالبًا ما يبدأ التطوير الأمامي باستعادة مسودة تصميم واجهة المستخدم. أثناء عملية الترميز ، غالبًا ما نجد مثل هذا التصميم: لون خلفية صلبة (على افتراض: #F00) ، ولكن مع عتامة 75 ٪. من الواضح أنه لا يمكننا ببساطة تعيين هذا الموقف من خلال dom.style.backgroundColor = "#F00" لأنه لا يمكن تحقيق التأثير الشفاف. أثناء الدوران ، نعلم أن هناك شيئًا RGBA في CSS3 ، مما يعني أنه يمكننا تعيين لون خلفية شفاف من خلال dom.style.backgroundColor = "RGBA (255 ، 0 ، 0 ، 0.75)" بهذه الطريقة. بعد ذلك ، يكون السؤال مرة أخرى: من السهل القيام بهذا التحويل في Photoshop ، ولكن إذا كنا في JavaScript ، كيف ينبغي أن نحول ("#F00" ، 75) إلى RGBA (255 ، 0 ، 0 ، 0.75)؟
بعد ذلك ، دعونا نرى كيف أفعل ذلك.
RGB (A) قيمة اللون تم تحويلها إلى لون سداسي عشري (HEX)
انهم جميعا من أجل التنمية ، نحن نفهم! من الأفضل تحميل الكود مباشرة ، ولكن إليك قطعة من العنوان الأصلي:
<!-لانج: JS->
نسخة الكود كما يلي:
var rgbtohex = function (rgb) {
var rrgb =/rgb/((/d {1،3}) ، (/d {1،3}) ، (/d {1،3})/)/،
rrgba = /rgba/:
R ، G ، B ، A ، RS = RGB.Replace (// S+/G ، "") .Match (RRGB) ،
rsa = rgb.replace (// s+/g ، "") .Match (rrgba) ؛
إذا (روبية) {
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 ؛
إرجاع {hex: "#" + r + g + b ، alpha: 100} ؛
} آخر إذا (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)} ؛
} آخر {
إرجاع {hex: rgb ، alpha: 100} ؛
}
} ؛
لماذا هو الأكثر بدائية؟ لأنه عندما أقوم بمراجعة الكود اليوم ، وجدت أنه لا يزال هناك مجال للتطور هنا. دعنا نقارن الرمز المتطور (المحسن):
<!-لانج: JS->
نسخة الكود كما يلي:
var rgbtohex = function (rgb) {
var rrgba = /rgba؟/(/d {1،3 )) ، (/d {1،3 ))،
ص ، ز ، ب ، أ
rsa = rgb.replace (// s+/g ، "") .Match (rrgba) ؛
إذا (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)} ؛
} آخر {
إرجاع {hex: rgb ، alpha: 100} ؛
}
} ؛
ناهيك عن وجود واحد إذا كان فرع مفقود ، فمن الواضح من منظور حجم الكود وحده! بعد ذلك ، دعنا نرى ما إذا كانت نتيجة التحويل كما نرغب ، ولهذا قمت بتنفيذ بضعة أسطر من التعليمات البرمجية الموضحة في الشكل التالي في وحدة التحكم:
انطلاقًا من نتائج التنفيذ ، يبدو أن طريقتنا قد حققت هدفنا. ومع ذلك ، يجب أن يلاحظ الأصدقاء الدقيقان أن هناك سهامين حمراء في الصورة. هل هناك أي عيوب هنا؟ جيد. دعنا نلقي نظرة فاحصة على معلمة اللون RGB (255 ، 0 ، 0 ، 2) مرت في السهم الأول. في الواقع ، هذه ليست قيمة ألوان قانونية. لا تحتوي قيمة اللون بتنسيق RGB على المعلمة الرابعة (الشفافية) ؛ ثم انظر إلى السهم الثاني RGBA (255 ، 0 ، 0 ، 1.48) في السهم الثاني. لا توجد مشكلة في التنسيق هنا ، ولكن الشفافية هي 1.48 ، وهي في الواقع ليست قيمة شفافية قانونية. تم تنفيذ طريقتنا بشكل طبيعي وعادت بشكل طبيعي ، مما يشير إلى أن طريقتنا لا تزال لديها مجال لمزيد من التطور ، لذلك سوف نترك الأمر للجميع لأداء!
تحويل اللون السداسي (HEX) إلى تنسيق RGBA
في التطوير اليومي ، يجب أن تكون قيمة اللون التي نستخدمها في أغلب الأحيان هي قيمة اللون بتنسيق سداسي عشري ( #FF0000 ، #F00 ، إلخ). إذا احتجنا إلى تحويله إلى تنسيق RGBA عند استخدام قيم الألوان ، فما الذي يجب أن نفعله؟
<!-لانج: JS->
نسخة الكود كما يلي:
var hextorgba = function (hex ، al) {
var hexcolor = /^#/.test(Hex)؟ Hex.slice (1): Hex ،
ALP = HEX === "شفاف"؟ 0: Math.ceil (al) ،
R ، G ، B ؛
HexColor = /^ Budap0-9a-f/2010 {3) Budap0-9a-f20 {6) $/i.test(hexcolor)؟ Hexcolor: 'ffffff' ؛
if (hexcolor.length === 3) {
HexColor = hexcolor.replace (/(/w) (/w) (/w)/gi ، '$ 1 $ 1 $ 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) ؛
ب = parseint (ب ، 16) ؛
يعود {
Hex: '#' + hexcolor ،
ألفا: alp ،
RGBA: 'RGBA (' + r + '،' + g + '،' + b + '،' + (alp / 100) .Tofixed (2) + ')'
} ؛
} ؛
وبالمثل ، نكتب أيضًا رمز التحقق لاختبار ما إذا كان تحويلنا طبيعيًا:
انطلاقًا من نتائج التنفيذ ، لا توجد مشكلة في طريقنا ويمكن أن تحصل على نتائج التحويل التي نريدها. ولكن هنا ما زلنا نترك سهمين حمراء ، شفافية غير قانونية وقيم ألوان غير قانونية. هذا الجزء من الوظيفة التطورية يترك أيضًا للجميع ، هاها ...
أخيرًا ، يعد التحويل المتبادل بين قيم ألوان صفحة الويب مشكلة كليشيهات. لقد أدرجت للتو واحد منهم هنا. أعتقد أن هناك طرقًا أكثر وأفضل لاستخدامها. الجميع مرحب بهم لاقتراحه ، والتواصل وإحداث تقدم معًا ~~