나는 최근에 비즈니스 요구를 완성하는 데 바빴으며 오랫동안 블로그를 작성하지 않았습니다. 오늘은 약간의 시간이 있고 최근 프로젝트에서 일부 프론트 엔드 코드를 살펴 보았습니다. 웹 색상 변환 기능을 보았을 때 갑자기 색상 설정/편집 요구 사항을 수행 할 때 종종 다양한 색상 값 형식의 교환과 관련이 있다고 생각했습니다. 그래서 나는이 기능 의이 부분을 구현하는 방법을 기록하고, 그것을 적어 놓고, 당신과 공유하고, 독자들이 그들의 의견을 표현하고 더 많은 의사 소통을하기를 바랍니다.
먼저 문제를보십시오
질문 1. 프론트 엔드 웹 페이지를 개발할 때, 우리는 종종 dom.style.backgroundcolor = "#f00"을 사용하여 DOM 요소의 배경색을 설정합니다. 우리는 또한 코드를 유사하게 사용합니다 (왜 동일합니까? 많은 경우가 있으므로 여기에 상상력을 자유롭게 사용할 수 있습니다) var bgc = dom.style.backgroundcolor는 dom 요소의 배경색을 얻습니다. 질문은 아래 그림을 참조하십시오.
여기서 비교가 충분히 분명하지 않으면 계속 살펴 보겠습니다.
분명히, 동일한 색상 값은 같아야하지만 결과는 그렇지 않습니다. 이것은 고립 된 경우가 아닙니다. 크롬 개발 도구와 Firefox 콘솔에서 얻은 결과는 동일합니다.
질문 2 : 프론트 엔드 개발은 종종 UI 설계 초안을 복원하는 것으로 시작합니다. 인코딩 과정에서 우리는 종종 그러한 디자인을 찾습니다 : 박스 배경 단색 (가정 : #F00)이지만 75% 불투명도가 있습니다. 분명히, 우리는 반투명 효과를 달성 할 수 없기 때문에 dom.style.backgroundcolor = "#f00"을 통해 단순히이 상황을 설정할 수 없습니다. 우리가 돌아올 때, 우리는 CSS3에 RGBA 물건이 있다는 것을 알고 있습니다. 즉,이 방법으로 dom.style.backgroundcolor = "RGBA (255, 0, 0, 0.75)를 통해 반투명 배경색을 설정할 수 있습니다. 그런 다음 질문은 다시 있습니다.이 전환은 Photoshop에서 쉽게 할 수 있지만 JavaScript에있는 경우 어떻게 RGBA (255, 0, 0, 0.75)로 어떻게 변환해야합니까 ( "#f00", 75)?
다음으로, 내가 어떻게하는지 봅시다.
RGB (a) hex 색상으로 변환 된 색 값 (16 진)
그들은 모두 개발을위한 것입니다. 우리는 이해합니다! 코드를 직접 업로드하는 것이 좋습니다. 그러나 여기에 원래 코드가 있습니다.
<!-lang : js->
코드 사본은 다음과 같습니다.
var rgbtohex = function (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)};
} 또 다른 {
return {hex : rgb, alpha : 100};
}
};
왜 가장 원시적입니까? 오늘 코드를 검토 할 때 여기에 진화의 여지가 여전히 있음을 알았습니다. 진화 된 (최적화) 코드를 비교해 봅시다 :
<!-lang : js->
코드 사본은 다음과 같습니다.
var rgbtohex = function (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)};
} 또 다른 {
return {hex : rgb, alpha : 100};
}
};
분기가 누락 된 경우 하나가 있다는 것은 말할 것도없이 코드 볼륨의 관점에서만 분명합니다! 다음으로, 전환 결과가 원하는대로 있는지 살펴 보겠습니다.이를 위해 콘솔의 다음 그림에 표시된 몇 줄의 코드를 실행했습니다.
실행 결과를 판단하면, 우리의 방법은 우리의 목표를 달성 한 것으로 보입니다. 그러나 신중한 친구들은 그림에 두 개의 빨간색 화살표가 있음을 알아야합니다. 여기에 함정이 있습니까? 좋은. 첫 번째 화살표에서 통과 한 색상 매개 변수 RGB (255, 0, 0, 2)를 자세히 살펴 보겠습니다. 실제로 이것은 법적 색상 가치가 아닙니다. RGB 형식의 색상 값에는 네 번째 (투명성) 매개 변수가 없습니다. 그런 다음 두 번째 화살표에서 두 번째 화살표 RGBA (255, 0, 0, 1.48)를보십시오. 여기서 형식에는 문제가 없지만 투명성은 1.48이며 실제로는 법적 투명성 값이 아닙니다. 우리의 방법은 정상적으로 실행되고 정상적으로 반환되었으며, 우리의 방법은 여전히 더 많은 진화를위한 여지가 있음을 나타내므로 모든 사람들에게 공연을 할 것입니다!
16 진수 (16 진)를 RGBA 형식으로 변환하십시오
일일 개발에서 가장 자주 사용하는 색상 값은 16 진 형식 ( #ff0000, #f00 등)의 색상 값이어야합니다. 색상 값을 사용할 때 RGBA 형식으로 변환 해야하는 경우 어떻게해야합니까?
<!-lang : js->
코드 사본은 다음과 같습니다.
var hextorgba = function (hex, al) {
var hexcolor = /^#/.test(Hex)? 16 진수 (1) : 16 진수,
alp = hex === '투명'? 0 : Math.ceil (al),
R, G, B;
HexColor = /^=-9a-f] {3 }| 9A-f] {6 }$/I.Test (hexColor)? 헥스 콜러 : 'ffffff';
if (hexcolor.length === 3) {
hexColor = hexColor.replace (/(/w) (/w) (/w)/gi, '$ 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);
반품 {
16 진수 : '#' + hexColor,
알파 : 알프,
rgba : 'rgba (' + r + ',' + g + ',' + b + ',' + (alp / 100) .tofixed (2) + ')' '
};
};
마찬가지로, 우리는 또한 변환이 정상인지 테스트하기 위해 검증 코드를 작성합니다.
실행 결과를 판단하면, 우리의 방법은 아무런 문제가 없으며 우리가 원하는 전환 결과를 얻을 수 있습니다. 그러나 여기서 우리는 여전히 두 개의 빨간색 화살표, 불법 투명성 및 불법 색상 값을 남깁니다. 진화 기능 의이 부분은 모두에게도 남겨져 있습니다. 하하 ...
마지막으로, 웹 페이지 색상 값 사이의 상호 변환은 실제로 진부한 문제입니다. 나는 그중 하나를 여기에 나열했습니다. 나는 더 많은 사용 방법이 있다고 생각합니다. 모두가 그것을 제안하고 의사 소통하고 함께 진행할 수 있습니다 ~~