大家好，我是前端西瓜哥。今天講一下圖形編輯器如何實(shí)現(xiàn)歷史記錄，做到撤銷重做。

其實(shí)就是版本號(hào)的更替。每個(gè)版本保存一個(gè)狀態(tài)。

數(shù)據(jù)結(jié)構(gòu)

要記錄圖形編輯器的歷史記錄，支持撤銷重做功能，需要兩個(gè)棧：撤銷（undo）棧和重做（redo）棧。

每當(dāng)用戶進(jìn)行一個(gè)操作（比如移動(dòng)一個(gè)圖形），就會(huì)產(chǎn)生一個(gè)新的版本，將這個(gè)操作產(chǎn)生的狀態(tài)保持加入到 undo 棧頂，此外 redo 棧會(huì)清空。因?yàn)橛脩艨赡艹蜂N了幾次然后產(chǎn)生了新的操作，無法重做它們了。

當(dāng)用戶撤銷，undo 棧出棧，并放到 redo 棧，然后使用 undo 棧頂?shù)臓顟B(tài)。當(dāng)用戶重做時(shí)，redo 棧出棧，再放到 undo 棧上，并應(yīng)用 undo 棧頂?shù)臓顟B(tài)。

原理大概這樣。

瀏覽器的回退前進(jìn)的表現(xiàn)其實(shí)就是一個(gè)很常見的例子。

數(shù)據(jù)結(jié)構(gòu)還有另一種方案：雙向鏈表加兩個(gè)指針，一個(gè)指針指向當(dāng)前版本狀態(tài)，另一個(gè)指針指向 redo 最后一次可執(zhí)行到達(dá)的狀態(tài)。

然后是如果要支持協(xié)同的場(chǎng)景，你的撤回不會(huì)回到之前的版本，而是將之前的版本的狀態(tài)拿出來作為一個(gè)新的版本。

然后是協(xié)同中你不能撤回別人的操作，只能撤回自己的，并且要用協(xié)同算法處理和其他協(xié)同者的沖突邏輯。

要保存哪些狀態(tài)

那么我們的狀態(tài)要保存哪些狀態(tài)呢？

1. 圖形樹數(shù)據(jù)
2. 圖形樹需要的引用
3. 一些設(shè)置

圖形樹是必要的，我們需要用它渲染畫布內(nèi)容。此外還有游離在圖形樹之外的被用到的對(duì)象，比如圖層、被多次引用的圖形。你可以也把它們也放到圖形樹里面去。

最后是一些需要共享的設(shè)置，比如表格的行高、篩選條件等。

像是顏色主題、國(guó)際化語言設(shè)置則不需要?dú)v史記錄，它是用戶自己選擇的個(gè)性化定制。

我們看具體的幾種實(shí)現(xiàn)。

全量快照

每次操作的到的新狀態(tài)，完全拷貝一份保存起來。

因?yàn)閷?duì)象如果只是淺拷貝，其中的引用對(duì)象可能會(huì)被意外的修改，通常我們會(huì)選擇 序列化成字符串 保存，即JSON.stringify。撤銷重做的時(shí)候再解析出來作為當(dāng)前狀態(tài)。

優(yōu)點(diǎn)是實(shí)現(xiàn)簡(jiǎn)單。

缺點(diǎn)是當(dāng)狀態(tài)很大的時(shí)候，每次生成快照都會(huì)比較耗時(shí)，且操作很多產(chǎn)生很多版本時(shí)，需要大量的內(nèi)存空間保證這些完整狀態(tài)。

如果畫布上有一萬個(gè)獨(dú)立的實(shí)體，就意味著每進(jìn)行一次操作，就要將這個(gè)一萬個(gè)實(shí)體深拷貝一份。100 次就是 100w，很恐怖。

僅推薦簡(jiǎn)單的圖形編輯器使用，或者做 demo 用。

補(bǔ)?。╬atch）

全量快照讓編輯器的上限很低，不是最優(yōu)解。

一種更好的解法，是 打補(bǔ)丁（patch）。

基于上一個(gè)版本 1，打一個(gè)補(bǔ)丁，變成下一個(gè)版本 2。同時(shí)我們記錄一個(gè)反向的補(bǔ)丁，撤回的時(shí)候能通過它從版本 2 回到版本 1。

這個(gè)方案對(duì)應(yīng)了設(shè)計(jì)模式的 命令模式，我們構(gòu)建 Command 類，這個(gè)類有 execute、redo、undo 方法，這些方法會(huì)對(duì)傳入的舊的狀態(tài)對(duì)象打補(bǔ)丁，得到一個(gè)新的狀態(tài)。

比如添加矩形命令，execute 和 redo 時(shí)我們會(huì)往圖形樹的末尾加一個(gè)矩形對(duì)象，undo 就是將這個(gè)矩形從圖形樹中移除。undo 棧和 redo 棧此時(shí)記錄的就是一個(gè)個(gè) command 對(duì)象了。

純純用樸實(shí)無華的命令模式去實(shí)現(xiàn)，還是有點(diǎn)坑的。因?yàn)橐獙?shí)現(xiàn)的命令太多了，比如添加圖形、修改圖形屬性、刪除圖形、對(duì)幾個(gè)圖形做右對(duì)齊等，這些都要自己一個(gè)個(gè)實(shí)現(xiàn) redo 和 undo。復(fù)雜一點(diǎn)就要抓瞎，建議找一些輪子。比如 immer、y.js。

使用補(bǔ)丁方案還有一個(gè)好處，就方便實(shí)現(xiàn) “動(dòng)作” 功能。（當(dāng)然這不是一個(gè)優(yōu)先級(jí)很高的功能）

比如我們想要給一個(gè)圖形先順時(shí)針旋轉(zhuǎn) 45 度，然后向右移動(dòng) 10 個(gè)單位，我們希望記錄這兩個(gè)操作，給其他圖形也應(yīng)用這些操作。

快照的方式就不好搞，或許我們可以對(duì)比新舊狀態(tài)找不同推斷出行為，但不好搞。因?yàn)閷傩缘淖兓赡軄碜圆煌牟僮?，比如移?dòng)，可以通過移動(dòng)工具相對(duì)位移產(chǎn)生，也可能直接屬性面板改 x 值，也可能是通過對(duì)齊操作產(chǎn)生的。

patch 就很適合。

什么時(shí)候保存狀態(tài)

我們需要確認(rèn)一個(gè)操作完成的時(shí)刻，將它加入到歷史記錄中。

我們操作圖形，會(huì)產(chǎn)生一些 中間狀態(tài)。比如移動(dòng)一個(gè)圖形，拖拽的過程中不生產(chǎn)一個(gè)歷史版本，直到拖拽結(jié)束才記錄。

一種方式是：操作圖形的替身，操作結(jié)束后才更新真正的狀態(tài)。

一些編輯器，比如 Adobe Illustrator、AutoCAD，我們?cè)诓僮鲌D形的時(shí)候，會(huì)看到一個(gè)臨時(shí)的替身，就是將被選中圖形的輪廓線或拷貝做鼠標(biāo)的跟隨，釋放后才真正修改圖形屬性。

還比如顏色的修改，在拾色器中挑選顏色時(shí)不會(huì)立即修改圖形，在點(diǎn)擊確認(rèn)才真正修改圖形。

另一種方式是：直接操作真正的狀態(tài)，在操作結(jié)束的時(shí)候，記錄這個(gè)時(shí)刻的狀態(tài)。

第一種方式的好處是，狀態(tài)沒有中間狀態(tài)，替身操作完，計(jì)算出新狀態(tài)應(yīng)用到真正的狀態(tài)上就好了。

第二種方式就要額外在操作開始時(shí)，保存原始狀態(tài)的快照，因?yàn)橹笪覀儠?huì)產(chǎn)生中間狀態(tài)，然后在操作結(jié)束后計(jì)算 patch。

但第二種方式用戶體驗(yàn)會(huì)更好些，用戶能實(shí)時(shí)看到一個(gè)圖形的變化，判斷是不是自己需要的效果，而不是看到一個(gè) “通往未來的幻影”。

結(jié)尾

我是前端西瓜哥，關(guān)注我，學(xué)習(xí)前端不迷路。文章來源地址http://www.zghlxwxcb.cn/news/detail-429480.html

到了這里，關(guān)于圖形編輯器：歷史記錄設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！