資訊專欄INFORMATION COLUMN
摘要：根據(jù)背景的顏色調(diào)整字體的顏色是我最近在項(xiàng)目中遇到的一個(gè)需求，這里將代碼貼出來，供以后查閱。根據(jù)進(jìn)制顏色值，計(jì)算色彩的亮度。所以，當(dāng)背景色的亮度時(shí)，文字就應(yīng)該為白色，反之為黑色。
根據(jù)背景的顏色調(diào)整字體的顏色是我最近在項(xiàng)目中遇到的一個(gè)需求，這里將代碼貼出來，供以后查閱。也希望對(duì)遇到同樣需求的人有幫助。
這里的需求是：整個(gè)項(xiàng)目中的所有頁面都有一個(gè)背景色， 這個(gè)背景色是在專門的配置頁面統(tǒng)一配置的，當(dāng)在配置頁面設(shè)置好顏色后，整個(gè)項(xiàng)目中的背景色隨之改變，同時(shí)，各個(gè)頁面頭部，底部的一些文字顏色隨著背景的亮度，對(duì)應(yīng)變成黑色或者白色。
step1: 遇到這么個(gè)需求，我首先去搜索了計(jì)算顏色亮度的函數(shù)：
let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
step2: 由于，我們項(xiàng)目里存的都是16進(jìn)制的顏色，所以需要將16進(jìn)制的顏色轉(zhuǎn)換成rgb表示。
const hexToRgb = (hexColor) => {
return parseInt(hexColor, 16).toString();
}
step3: 根據(jù)16進(jìn)制顏色值，計(jì)算色彩的亮度。
let brightnessOfColor = (colorHexdecimalValue) => {
let useColorValue = colorHexdecimalValue.slice(1);
let rColor = useColorValue.slice(0, 2);
let gColor = useColorValue.slice(2, 4);
let bColor = useColorValue.slice(4);
let rColorValue = hexToRgb(rColor);
let gColorValue = hexToRgb(gColor);
let bColorValue = hexToRgb(bColor);
let lightness = rColorValue * 0.299 + gColorValue * 0.587 + bColorValue * 0.114;
return lightness;
}
step4: 根據(jù)計(jì)算，顏色的色彩亮度區(qū)間是0~255，這里我取了一個(gè)中間值作為文字顏色的顯示的拐點(diǎn)。
decideTxtColor = (colorHexdecimal) => {
return brightnessOfColor(colorHexdecimal) < 128;
}
所以，當(dāng)背景色的亮度 < 128時(shí)，文字就應(yīng)該為白色，反之為黑色。
const IsWhiteFooter = decideTxtColor(window.themeColor);
接著將IsWhiteFooter用到標(biāo)簽的style上即可。
OK, 這就是我解決這個(gè)問題的過程。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99007.html
摘要：在這樣的配色中，最難分辨的就是局部變量和類型的私有字段其他好歹可以通過大小寫規(guī)則來判斷，如果代碼編寫夠規(guī)范的話。 1.eclipse 背景色設(shè)置：Window->Preferences->General->Editors->Text Editors->Backgroud colors取消System default 設(shè)置成：RGB(204,232,207). 2.字體大小設(shè)置：java...
摘要：色相是這個(gè)圓柱的偏角，飽和度為圓柱水平切面的半徑，亮度以圓柱的高度表示。這意味著中，飽和度總是從完全飽和變化到等價(jià)的灰色，而在中是從完全飽和變化為白色。到的換算在數(shù)學(xué)上定義為空間的坐標(biāo)到空間的坐標(biāo)的換算。當(dāng)為亮度為極值時(shí)，飽和度恒等于。 我在做 webapp 的頂部導(dǎo)航欄時(shí)，碰到了一個(gè)挑戰(zhàn)，導(dǎo)航欄的字體與圖標(biāo)要根據(jù)背景的顏色深淺來顯示不同白色和黑色，但是導(dǎo)航欄的顏色是支持多種配色的，我...
摘要：我們會(huì)在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
摘要：我們會(huì)在組合選擇器中來了解為什么權(quán)重值要加連字符。組合選擇器中的權(quán)重值會(huì)分別對(duì)不同類型的選擇器進(jìn)行計(jì)數(shù)。對(duì)比兩組選擇器，第二組選擇器有兩個(gè)選擇器，擁有更高的權(quán)重值。 CSS是一門復(fù)雜的語言，擁有相當(dāng)?shù)拇竽芰Α?它我們?cè)试S為頁面添加布局和設(shè)計(jì)，允許多個(gè)元素甚至多個(gè)頁面共享樣式。在我們有能力解鎖所有功能之前，我們必須先充分理解它的基礎(chǔ)點(diǎn)。 首先，我們要明確的了解樣式是怎么被渲染的。 具體的...
閱讀 2033·2021-09-29 09:35
閱讀 1960·2019-08-30 14:15
閱讀 2983·2019-08-30 10:56
閱讀 969·2019-08-29 16:59
閱讀 585·2019-08-29 14:04
閱讀 1316·2019-08-29 12:30
閱讀 1035·2019-08-28 18:19
閱讀 522·2019-08-26 11:51
