建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是前端西瓜哥。
創(chuàng)新互聯(lián)是一家專業(yè)提供靖江企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、HTML5、小程序制作等業(yè)務(wù)。10年已為靖江眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進行中。
今天簡單講講圖形編輯器的顯示屬性值時，會遇到的格式轉(zhuǎn)換問題。
編輯器 github 地址：
https://github.com/F-star/suika
線上體驗：
https://blog.fstars.wang/app/suika/
單位轉(zhuǎn)換
圖形編輯器中的數(shù)據(jù)，通過 UI 層進行展示時，可能不會直接將數(shù)據(jù)源的原始值展示出來，而是會額外進行單位的轉(zhuǎn)換，變成另一種格式。
這里以簡單而常見的弧度為例。
圖形的旋轉(zhuǎn)在數(shù)據(jù)源中，會用弧度（radian）表示。因為弧度更適合進行數(shù)學(xué)計算，且很多 API 比如 Math.sin(x) 都需要你提供弧度。
但在面向用戶的 UI 層，我們通常會提供角度（degree），因為日常生活中人們更常使用，它更直觀。
但數(shù)據(jù)中我們還是要保存弧度的。
轉(zhuǎn)換算法
我們需要明確的點是：
- 數(shù)據(jù)源要用唯一格式，這樣可以確保運算邏輯的一致性。比如旋轉(zhuǎn)不建議即可以保存弧度，也可以保存角度。另外，盡量選擇精度高的。
- 如果有顯示另一種格式的需求，你需要實現(xiàn)源格式轉(zhuǎn)其他格式算法。比如弧度轉(zhuǎn)角度顯示到用戶界面上；
- 如果有修改其他格式然后修改源數(shù)據(jù)的需求，你需要實現(xiàn)其他格式轉(zhuǎn)源數(shù)據(jù)的算法。
/**
* 弧度轉(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)換通常會丟失一些精度的。
這里弧度和角度的轉(zhuǎn)換就是一個例子。
圓周率是一個無限不循環(huán)小數(shù)，計算的時候，會對其丟掉一些精度再參與計算，最后的結(jié)果自然也丟失了精度。
這里給一下 UI 層實現(xiàn)思路，以 React 組件為例，核心實現(xiàn)大致如下：
const [radian, setRadian] = useState(0);
useEffect(() => {
rect.onRotationChange((val) => {
// 從編輯器內(nèi)核同步過來的狀態(tài)
setRadian(val);
})
});
{
const degree = e.target.value;
const radian = normalizeRadian(degree2Radian(degree));
rect.setRotation(radian);
}}
/> 題外話，UI 層會直接更新編輯器中的狀態(tài)，成功更新后通過事件訂閱通知回 UI 層，同步狀態(tài)。
弧度還是比較簡單的場景。
像是復(fù)雜一點的屬性，比如顏色值，通常要實現(xiàn)一個比較完善的拾色器，要支持多種格式，如RGBA、HSL、CMYK 等等，要實現(xiàn)的方法就更復(fù)雜也更多。
降低顯示精度
UI 層不會顯示全精度，意義不大。
比如 x 坐標的真實值是 52.24621202458749，但用戶是不希望看到這么長的值的，他只是想知道這個點大概在什么位置。
所以我們最好做一個四舍五入，比如保留有限的有效位顯示為 52.25。
需要注意的是，修改屬性值時不用做降低精度再轉(zhuǎn)為源格式，我們的數(shù)據(jù)源精度越高越好。
只在顯示時做降低精度。
檢驗和補正
因為涉及到用戶修改屬性值，所以我們需要對用戶的輸入值進行處理，嘗試得到一個合法值去修改屬性。
簡單的做法是 嚴格校驗，比如對于數(shù)字類型，出現(xiàn)非數(shù)字字符，就直接認為非法值。
稍微好一點的是從字符串中提取符合格式的部分。
更人性化的是猜測用戶想干嘛，做補全。比如對于 hex 格式的顏色值，用戶只輸入一個 3，我們給他補全為 33333。
最后
畫一張圖總結(jié)一下。
展示層可能和數(shù)據(jù)源的格式不同，顯示時要做格式轉(zhuǎn)換，然后降低精度，比如對于數(shù)字通常保留 1 到 5 個小數(shù)位就夠了。
修改非源格式要做校驗和補正，然后轉(zhuǎn)回數(shù)據(jù)源格式保存起來。保存成功后再把新值傳遞到 UI 層。
當前名稱：圖形編輯器開發(fā)：屬性顯示與格式轉(zhuǎn)換
文章網(wǎng)址：http://www.dlmjj.cn/article/djsoeec.html
