LEc28資訊網(wǎng)——每日最新資訊28at.com

方法一

在TypeScript中，你可以創(chuàng)建一個(gè)函數(shù)來確定基于背景顏色的對(duì)比色（通常是黑色或白色）作為文本顏色，以確保文本的可讀性。為了計(jì)算背景顏色與黑白之間的對(duì)比度，我們可以使用Web內(nèi)容可訪問性指南（WCAG）的公式。LEc28資訊網(wǎng)——每日最新資訊28at.com

下面是一個(gè)簡(jiǎn)單的TypeScript函數(shù)示例，它接受一個(gè)背景顏色（十六進(jìn)制格式）作為輸入，然后返回一個(gè)推薦的字體顏色（黑色或白色）：LEc28資訊網(wǎng)——每日最新資訊28at.com

function getContrastYIQ(hexcolor: string): string {  // 如果輸入不帶#，則添加  if (hexcolor.indexOf('#') !== 0) {    hexcolor = '#' + hexcolor;  }  // 去除#號(hào)  hexcolor = hexcolor.replace('#', '');  // 將十六進(jìn)制顏色分解為r, g, b  const r = parseInt(hexcolor.substr(0, 2), 16);  const g = parseInt(hexcolor.substr(2, 2), 16);  const b = parseInt(hexcolor.substr(4, 2), 16);  // 使用YIQ方程式計(jì)算亮度  const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;  // 根據(jù)亮度返回黑色或白色  return yiq >= 128 ? 'black' : 'white';}// 用法示例const backgroundColor = '#005A31'; // 深綠色const textColor = getContrastYIQ(backgroundColor);console.log(textColor); // 應(yīng)該返回'white'因?yàn)樯罹G色背景下白色文本更可讀

這個(gè)函數(shù)使用了YIQ色彩空間，這是一個(gè)電視廣播領(lǐng)域使用的色彩空間，其中Y代表亮度分量，而I和Q分別代表色度分量。在這個(gè)例子中，我們只關(guān)心Y分量（亮度），以決定文本顏色使用黑色還是白色。LEc28資訊網(wǎng)——每日最新資訊28at.com

請(qǐng)確保輸入的顏色格式正確，并且你的應(yīng)用可以處理不同的輸入格式。上面的代碼假設(shè)輸入是一個(gè)六位的十六進(jìn)制顏色值。LEc28資訊網(wǎng)——每日最新資訊28at.com

此外，還有更復(fù)雜的方法來判斷對(duì)比度，比如根據(jù)WCAG 2.0標(biāo)準(zhǔn)計(jì)算顏色之間的對(duì)比度比率。這樣的計(jì)算會(huì)更復(fù)雜一些，但也可以提供更精確的結(jié)果。LEc28資訊網(wǎng)——每日最新資訊28at.com

方法二

如果你希望函數(shù)能夠返回除黑白之外的其他顏色作為字體顏色，你可以通過定義一組顏色和它們的亮度閾值來實(shí)現(xiàn)。這樣，函數(shù)就可以根據(jù)背景顏色的亮度來選擇一個(gè)合適的字體顏色。LEc28資訊網(wǎng)——每日最新資訊28at.com

首先，我們定義一個(gè)簡(jiǎn)單的亮度判斷函數(shù)，然后基于背景色的亮度選擇合適的字體顏色。這里舉例說明如何擴(kuò)展前面的函數(shù)以支持多種顏色選擇。LEc28資訊網(wǎng)——每日最新資訊28at.com

function getBrightness(hexcolor: string): number {  // 標(biāo)準(zhǔn)化十六進(jìn)制格式  if (!hexcolor.startsWith('#')) {    hexcolor = '#' + hexcolor;  }  // 提取RGB組件  const r = parseInt(hexcolor.substring(1, 3), 16);  const g = parseInt(hexcolor.substring(3, 5), 16);  const b = parseInt(hexcolor.substring(5, 7), 16);  // 計(jì)算亮度  return ((r * 299) + (g * 587) + (b * 114)) / 1000;}function chooseTextColor(backgroundHex: string): string {  // 定義顏色選項(xiàng)和它們的亮度界限  const colors = [    { color: '#000000', minBrightness: 0, maxBrightness: 180 },   // 黑色    { color: '#FFFFFF', minBrightness: 180, maxBrightness: 256 }, // 白色    { color: '#FFD700', minBrightness: 100, maxBrightness: 220 }, // 金色    { color: '#0000FF', minBrightness: 50, maxBrightness: 150 }   // 藍(lán)色  ];  // 獲取背景色亮度  const backgroundBrightness = getBrightness(backgroundHex);  // 選擇一個(gè)亮度合適的顏色  const suitableColor = colors.find(c => backgroundBrightness >= c.minBrightness && backgroundBrightness < c.maxBrightness);  return suitableColor ? suitableColor.color : '#FFFFFF'; // 默認(rèn)返回白色}// 用法示例const backgroundColor = '#005A31'; // 深綠色const textColor = chooseTextColor(backgroundColor);console.log(textColor); // 根據(jù)配置，可能返回不同顏色

在這個(gè)例子中，我為函數(shù)增加了幾種顏色選擇。函數(shù)chooseTextColor將檢查背景顏色的亮度，并找到一個(gè)在設(shè)定亮度范圍內(nèi)的顏色作為文本顏色。你可以根據(jù)需要調(diào)整顏色選項(xiàng)和它們的亮度界限。LEc28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://m.www897cc.com/showinfo-26-87252-0.htmlTypeScript封裝一個(gè)根據(jù)背景色顯示適合的字體顏色

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： React19 她來了，她來了，他帶著禮物走來了

下一篇： 解密 Python 的變量和對(duì)象，它們之間有什么區(qū)別和聯(lián)系呢？