紅魔電競(jìng)平板評(píng)測(cè)：大屏幕硬實(shí)力
前言：三年的疫情因?yàn)橐暇W(wǎng)課的原因激活了平板市場(chǎng)，如今網(wǎng)課的時(shí)代已經(jīng)過去，大家的生活都恢復(fù)到了正軌，這也就意味著，真正考驗(yàn)平板電腦生存的環(huán)境來了。也就是面對(duì)著這種殘酷的
大家好，我是前端西瓜哥。
今天簡(jiǎn)單講講圖形編輯器的顯示屬性值時(shí)，會(huì)遇到的格式轉(zhuǎn)換問題。
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗(yàn)：
https://blog.fstars.wang/app/suika/
圖形編輯器中的數(shù)據(jù)，通過 UI 層進(jìn)行展示時(shí)，可能不會(huì)直接將數(shù)據(jù)源的原始值展示出來，而是會(huì)額外進(jìn)行單位的轉(zhuǎn)換，變成另一種格式。
這里以簡(jiǎn)單而常見的弧度為例。
圖形的旋轉(zhuǎn)在數(shù)據(jù)源中，會(huì)用弧度（radian）表示。因?yàn)榛《雀m合進(jìn)行數(shù)學(xué)計(jì)算，且很多 API 比如 Math.sin(x) 都需要你提供弧度。
但在面向用戶的 UI 層，我們通常會(huì)提供角度（degree），因?yàn)槿粘Ｉ钪腥藗兏Ｊ褂茫庇^。
但數(shù)據(jù)中我們還是要保存弧度的。
我們需要明確的點(diǎn)是：
/** * 弧度轉(zhuǎn)角度 */export function radian2Degree(radian: number) { return (radian * 180) / Math.PI;}/** * 角度轉(zhuǎn)弧度 */export function degree2Radian(degree: number) { return (degree * Math.PI) / 180;}需要注意，格式的轉(zhuǎn)換通常會(huì)丟失一些精度的。
這里弧度和角度的轉(zhuǎn)換就是一個(gè)例子。
圓周率是一個(gè)無限不循環(huán)小數(shù)，計(jì)算的時(shí)候，會(huì)對(duì)其丟掉一些精度再參與計(jì)算，最后的結(jié)果自然也丟失了精度。
這里給一下 UI 層實(shí)現(xiàn)思路，以 React 組件為例，核心實(shí)現(xiàn)大致如下：
const [radian, setRadian] = useState(0);useEffect(() => { rect.onRotationChange((val) => { // 從編輯器內(nèi)核同步過來的狀態(tài) setRadian(val); })});<NumberInput label="旋轉(zhuǎn)" value={remainDecimal(radian2Degree(radian))} onBlur={(e) => { const degree = e.target.value; const radian = normalizeRadian(degree2Radian(degree)); rect.setRotation(radian); }}/>題外話，UI 層會(huì)直接更新編輯器中的狀態(tài)，成功更新后通過事件訂閱通知回 UI 層，同步狀態(tài)。
弧度還是比較簡(jiǎn)單的場(chǎng)景。
像是復(fù)雜一點(diǎn)的屬性，比如顏色值，通常要實(shí)現(xiàn)一個(gè)比較完善的拾色器，要支持多種格式，如RGBA、HSL、CMYK 等等，要實(shí)現(xiàn)的方法就更復(fù)雜也更多。
UI 層不會(huì)顯示全精度，意義不大。
比如 x 坐標(biāo)的真實(shí)值是 52.24621202458749，但用戶是不希望看到這么長(zhǎng)的值的，他只是想知道這個(gè)點(diǎn)大概在什么位置。
所以我們最好做一個(gè)四舍五入，比如保留有限的有效位顯示為 52.25。
需要注意的是，修改屬性值時(shí)不用做降低精度再轉(zhuǎn)為源格式，我們的數(shù)據(jù)源精度越高越好。
只在顯示時(shí)做降低精度。
因?yàn)樯婕暗接脩粜薷膶傩灾担晕覀冃枰獙?duì)用戶的輸入值進(jìn)行處理，嘗試得到一個(gè)合法值去修改屬性。
簡(jiǎn)單的做法是 嚴(yán)格校驗(yàn)，比如對(duì)于數(shù)字類型，出現(xiàn)非數(shù)字字符，就直接認(rèn)為非法值。
稍微好一點(diǎn)的是從字符串中提取符合格式的部分。
更人性化的是猜測(cè)用戶想干嘛，做補(bǔ)全。比如對(duì)于 hex 格式的顏色值，用戶只輸入一個(gè) 3，我們給他補(bǔ)全為 33333。
畫一張圖總結(jié)一下。
展示層可能和數(shù)據(jù)源的格式不同，顯示時(shí)要做格式轉(zhuǎn)換，然后降低精度，比如對(duì)于數(shù)字通常保留 1 到 5 個(gè)小數(shù)位就夠了。
修改非源格式要做校驗(yàn)和補(bǔ)正，然后轉(zhuǎn)回?cái)?shù)據(jù)源格式保存起來。保存成功后再把新值傳遞到 UI 層。
本文鏈接：http://www.tebozhan.com/showinfo-26-12675-0.html圖形編輯器開發(fā)：屬性顯示與格式轉(zhuǎn)換
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)