В последнее время я был занят удовлетворением потребностей бизнеса и долгое время не написал блог. У меня сегодня немного времени, и я посмотрел некоторые из кодов фронт-элитных в последних проектах. Когда я увидел функцию преобразования веб -цвета, я внезапно подумал, что когда мы делаем некоторые настройки цвета/требования к редактированию, он часто включает обмен различными форматами значения цвета. Поэтому я решил записать, как я реализовал эту часть функции, записать ее и поделиться ею с вами, и надеяться, что читатели выражат свое мнение и больше сообщат.
Сначала посмотрите на проблему
Вопрос 1. Когда мы разрабатываем интерфейсную веб-страницу, мы часто используем dom.style.backgroundcolor = "#F00", чтобы установить цвет фона элемента DOM. Мы также будем использовать код аналогичный (почему бы то же самое? Итак, вопрос в том, пожалуйста, смотрите изображение ниже:
Если сравнение здесь недостаточно очевидно, давайте продолжим смотреть:
Очевидно, что то же значение цвета должно быть равным, но результат нет. Это не изолированный случай. Результаты, которые я получаю в инструментах разработки Chrome и консоли Firefox, одинаковы.
Вопрос 2: Фронтовая разработка часто начинается с восстановления проекта дизайна пользовательского интерфейса. Во время процесса кодирования мы часто находим такую конструкцию: сплошной коробку с твердым цветом (при условии: #F00), но с 75% непрозрачности. Очевидно, мы не можем просто установить эту ситуацию через dom.style.backgroundcolor = "#F00", потому что полупрозрачный эффект не может быть достигнут. Когда мы оборачиваемся, мы знаем, что в CSS3 есть вещь RGBA, что означает, что мы можем установить полупрозрачный цвет фона через dom.style.backgroundcolor = "rgba (255, 0, 0, 0,75)" таким образом. Затем вопрос снова: это преобразование легко сделать в Photoshop, но если мы находимся в JavaScript, как мы должны преобразовать ("#F00", 75) в RGBA (255, 0, 0, 0,75)?
Далее, давайте посмотрим, как я это делаю.
rgb (a) значение цвета преобразовано в Hex Color (Hex)
Мы все для развития, мы понимаем! Лучше просто загрузить код напрямую, но вот кусок оригинала:
<!-Ланг: JS->
Кода -копия выглядит следующим образом:
var rgbtohex = function (rgb) {
var rrgb =/rgb/((/d {1,3}), (/d {1,3}), (/d {1,3})/)/,
rrgba = /rgba/(/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};
}
};
Почему это самое примитивное? Потому что, когда я просматриваю код сегодня, я обнаружил, что здесь еще есть место для эволюции. Давайте сравним развитый (оптимизированный) код:
<!-Ланг: JS->
Кода -копия выглядит следующим образом:
var rgbtohex = function (rgb) {
var rrgba = /rgba?/((/d{1,3 )),(/d{1,3 )),(/d{1,3 ))(,(m./DY+)))/)/,
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, что на самом деле не является юридической прозрачностью. Наш метод был выполнен нормально и возвращается нормально, что указывает на то, что у нашего метода все еще есть место для дальнейшей эволюции, поэтому мы оставим его для всех!
Преобразовать Hex Color (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 = /^^nber0-9a-f^,3duce 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) + ')'
};
};
Точно так же мы также пишем код проверки, чтобы проверить, является ли наше преобразование нормальным:
Судя по результатам выполнения, у нашего метода нет проблем и может получить желаемые результаты конверсии. Но здесь мы все еще оставляем две красные стрелы, незаконную прозрачность и незаконные значения цвета. Эта часть эволюционной функции также остается для всех, ха -ха ...
Наконец, взаимное преобразование между значениями цвета веб -страницы на самом деле является проблемой клише. Я только что перечислил один из них здесь. Я считаю, что есть больше и лучших методов для использования. Каждый может предложить это, общаться и добиться прогресса вместе ~~