建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
圖形編輯器開發(fā)：顏色Hex標(biāo)準(zhǔn)化
大家好，我是前端西瓜哥。
目前成都創(chuàng)新互聯(lián)已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護、企業(yè)網(wǎng)站設(shè)計、陸港網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
最近做圖形編輯器，有這么一個需求，在輸入框輸入顏色十六進制值（hex），自動轉(zhuǎn)為對應(yīng) 6 位長度的 hex。
如果值不合法，回退為上次合法輸入。
我正在開發(fā)的圖形設(shè)計工具：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
顏色 hex 規(guī)則
顏色 hex 的通用規(guī)則是：
- 字符的范圍需要為 0~9，a~f，A~F。
- 長度有要求，需要為 6 位字符串（ABCDEF）；也可以為 3 位，比如 ABC，它等價于 6 位的 AABBCC。
處理用戶輸入
但是用戶的輸入你是無法預(yù)測的，大概率是不符合這兩個規(guī)則。
簡單地判斷不符合規(guī)則讓用戶的輸入無效，然后回退，并不是很好的做法。
為了有更好的用戶體驗，我們要做一下優(yōu)化。
當(dāng)用戶輸入完內(nèi)容，回車，我們對輸入字符串進行處理。
- 首先轉(zhuǎn)換大寫，這是為了統(tǒng)一格式和對比，其實和優(yōu)化無關(guān)。你也可以轉(zhuǎn)小寫。
- 取出字符串中從左開始第一個匹配上面規(guī)則的子字符串，用正則表達式是最合適的，正則為：/[0-9A-F]{1,6}/，表示匹配第一個字符為 0~9 和 A~F 的長度為 1 到 6 的字符串。
- 如果沒匹配到，返回一個空字符串表示沒找到合法值，輸入框的內(nèi)容會進行回退到上一次輸入的合法值。
- 如果匹配到，就會根據(jù)子字符串的長度執(zhí)行不同的邏輯
- 長度為 6，剛好，直接返回它。
- 長度為 4 和 5，屬于是 “高不成低不就”，我們將其截斷為 3。（或者你可以給它末尾補 0 補滿到 6 位）
- 長度為 3，我們應(yīng)用的規(guī)則是，從 ABC 轉(zhuǎn)換為 AABBCC，因為對應(yīng)經(jīng)典規(guī)則，前者是后者的縮寫。
- 長度為 2 或 1，則不斷地將自己添加到末尾，直到滿 6 位，比如：AB 會變成 AABBCC，A 會變成 AAAAAA。
這樣用戶輸入 #0，這個輸入本身不符合顏色 hex 規(guī)則，但我們理解用戶其實是想要一個純黑色。
通過上面的處理，我們會返回一個 000000，而不是簡單地認(rèn)為用戶輸入不合法，將其丟掉。
代碼實現(xiàn)
const normalizeHex = (hex: string) => {
// (1)轉(zhuǎn)大寫
hex = hex.toUpperCase();
// (2)找出其中的符合顏色 hex 規(guī)則的子字符串
const match = hex.match(/[0-9A-F]{1,6}/);
if (!match) {
return '';
}
hex = match[0];
if (hex.length === 6) {
return hex;
}
if (hex.length === 4 || hex.length === 5) {
hex = hex.slice(0, 3);
}
// ABC -> AABBCC
if (hex.length === 3) {
return hex
.split('')
.map((c) => c + c)
.join('');
}
// AB -> ABABAB
// A -> AAAAAA
return hex.padEnd(6, hex);
};符合經(jīng)典規(guī)則（AABBCC 和 ABC）的情況：
找不到 hex 字符串的情況，會回退到上次的合法值
其他情況：
文章標(biāo)題：圖形編輯器開發(fā)：顏色Hex標(biāo)準(zhǔn)化
文章來源：http://www.5511xx.com/article/dpdjjsg.html
