ฉันยุ่งอยู่กับความต้องการทางธุรกิจเมื่อเร็ว ๆ นี้และยังไม่ได้เขียนบล็อกมาเป็นเวลานาน วันนี้ฉันมีเวลาเล็กน้อยและดูรหัสส่วนหน้าในโครงการล่าสุด เมื่อฉันเห็นฟังก์ชั่นการแปลงสีเว็บฉันก็คิดว่าเมื่อเราทำการตั้งค่าสี/การแก้ไขบางอย่างมันมักจะเกี่ยวข้องกับการแลกเปลี่ยนรูปแบบค่าสีต่างๆ ดังนั้นฉันจึงตัดสินใจที่จะบันทึกว่าฉันใช้งานส่วนนี้ได้อย่างไรเขียนมันลงและแบ่งปันกับคุณและหวังว่าผู้อ่านจะแสดงความคิดเห็นและสื่อสารมากขึ้น
ดูปัญหาก่อน
คำถามที่ 1. เมื่อเราพัฒนาหน้าเว็บส่วนหน้าเรามักจะใช้ dom.style.backgroundColor = "#f00" เพื่อตั้งค่าสีพื้นหลังขององค์ประกอบ DOM นอกจากนี้เรายังจะใช้รหัสที่คล้ายกัน (ทำไมเหมือนกันมีหลายกรณีดังนั้นเราจึงสามารถใช้จินตนาการของเราได้อย่างอิสระที่นี่) var bgc = dom.style.backgroundcolor เพื่อรับสีพื้นหลังขององค์ประกอบ DOM ดังนั้นคำถามคือโปรดดูภาพด้านล่าง:
หากการเปรียบเทียบที่นี่ไม่ชัดเจนพอลองดูต่อไป:
เห็นได้ชัดว่าค่าสีเดียวกันควรเท่ากัน แต่ผลลัพธ์ไม่ได้ นี่ไม่ใช่กรณีที่แยกได้ ผลลัพธ์ที่ฉันได้รับในเครื่องมือพัฒนา Chrome และคอนโซล Firefox นั้นเหมือนกัน
คำถามที่ 2: การพัฒนาส่วนหน้ามักจะเริ่มต้นด้วยการฟื้นฟูร่างการออกแบบ UI ในระหว่างกระบวนการเข้ารหัสเรามักจะพบการออกแบบดังกล่าว: สีพื้นหลังของกล่องสีทึบ (สมมติว่า: #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)
พวกเขาทั้งหมดเพื่อการพัฒนาเราเข้าใจ! เป็นการดีกว่าที่จะอัปโหลดรหัสโดยตรง แต่นี่คือชิ้นส่วนของต้นฉบับ:
<!-Lang: JS->
การคัดลอกรหัสมีดังนี้:
var rgbtohex = function (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,
rrgba = /rgba/((/dd {1,3s
r, g, b, a, rs = rgb.replace (// s+/g, "") .match (rrgb),
rsa = rgb.replace (// s+/g, ""). -match (rrgba);
ถ้า (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};
} อื่นถ้า (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)};
} อื่น {
return {hex: rgb, alpha: 100};
-
-
ทำไมถึงเป็นแบบดั้งเดิมที่สุด? เพราะเมื่อฉันตรวจสอบรหัสวันนี้ฉันพบว่ายังมีที่ว่างสำหรับวิวัฒนาการที่นี่ มาเปรียบเทียบรหัส (ปรับให้เหมาะสม) ที่พัฒนาขึ้น:
<!-Lang: JS->
การคัดลอกรหัสมีดังนี้:
var rgbtohex = function (rgb) {
var rrgba = /rgba?/((/dd {1,3rs
R, G, B, A
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)};
} อื่น {
return {hex: rgb, alpha: 100};
-
-
ไม่ต้องพูดถึงว่ามีหนึ่งถ้าสาขาหายไปมันจะเห็นได้ชัดจากมุมมองของปริมาณรหัสเพียงอย่างเดียว! ต่อไปเรามาดูกันว่าผลการแปลงเป็นไปตามที่เราต้องการหรือไม่และสำหรับเรื่องนี้ฉันเรียกใช้รหัสสองสามบรรทัดที่แสดงในรูปต่อไปนี้ในคอนโซล:
ตัดสินจากผลการดำเนินการวิธีการของเราดูเหมือนจะบรรลุเป้าหมายของเรา อย่างไรก็ตามเพื่อนที่ระมัดระวังควรสังเกตว่ามีลูกศรสีแดงสองตัวในภาพ มีข้อผิดพลาดที่นี่หรือไม่? ดี. ลองดูที่พารามิเตอร์สี RGB (255, 0, 0, 2) อย่างใกล้ชิดในลูกศรแรก ในความเป็นจริงนี่ไม่ใช่ค่าสีตามกฎหมาย ค่าสีในรูปแบบ RGB ไม่มีพารามิเตอร์ที่สี่ (โปร่งใส); จากนั้นดูที่ลูกศรที่สอง RGBA (255, 0, 0, 1.48) ในลูกศรที่สอง ไม่มีปัญหากับรูปแบบที่นี่ แต่ความโปร่งใสคือ 1.48 ซึ่งจริง ๆ แล้วไม่ใช่ค่าความโปร่งใสทางกฎหมาย วิธีการของเราถูกดำเนินการตามปกติและส่งคืนตามปกติแสดงว่าวิธีการของเรายังคงมีที่ว่างสำหรับวิวัฒนาการเพิ่มเติมดังนั้นเราจะปล่อยให้ทุกคนแสดง!
แปลงรูปแบบ Hex (hex) เป็นรูปแบบ RGBA
ในการพัฒนารายวันค่าสีที่เราใช้บ่อยที่สุดควรเป็นค่าสีในรูปแบบเลขฐานสิบหก ( #FF0000, #F00 ฯลฯ ) หากเราต้องการแปลงเป็นรูปแบบ RGBA เมื่อใช้ค่าสีเราควรทำอย่างไร
<!-Lang: JS->
การคัดลอกรหัสมีดังนี้:
var hextorgba = function (hex, al) {
var hexcolor = /^#/.test(Hex)? hex.slice (1): hex,
ALP = hex === 'โปร่งใส'? 0: Math.Ceil (Al),
R, G, B;
hexColor = /^ [0-9a-fink {3 }| [0-9a-fhavy {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);
กลับ {
hex: '#' + hexcolor,
อัลฟ่า: ALP,
rgba: 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixed (2) + ')'
-
-
ในทำนองเดียวกันเรายังเขียนรหัสการตรวจสอบเพื่อทดสอบว่าการแปลงของเราเป็นเรื่องปกติหรือไม่:
ตัดสินจากผลการดำเนินการวิธีการของเราไม่มีปัญหาและสามารถรับผลการแปลงที่เราต้องการ แต่ที่นี่เรายังคงทิ้งลูกศรสีแดงสองลูกความโปร่งใสที่ผิดกฎหมายและค่าสีที่ผิดกฎหมาย ส่วนหนึ่งของฟังก์ชั่นวิวัฒนาการยังเหลือสำหรับทุกคนฮ่าฮ่า ...
ในที่สุดการแปลงซึ่งกันและกันระหว่างค่าสีของหน้าเว็บเป็นปัญหาที่น่าเบื่อ ฉันเพิ่งแสดงรายการหนึ่งในนั้นที่นี่ ฉันเชื่อว่ามีวิธีการใช้มากขึ้นเรื่อย ๆ ทุกคนยินดีที่จะเสนอสื่อสารและก้าวหน้าด้วยกัน ~~