HTML畫布中的撤消/重做功能

Question

我在html canvas上工作。 我實現了以下功能：

1) Simple Draw
2) Erasor
3) Shapes Draw
4) Shapes Resize
5) Shapes Move
6) Color Select

現在，我想添加undo/redo功能。

考慮到實現的上述功能，我正在考慮在每次事件執行時保存整個canvas實例。 例如，在執行shape resize ，我將整個畫布實例推入數組。

當用戶單擊undo ，我簡單地從數組中pop最后一個元素，然后重新繪制canvas 。

但是，我認為每次保存整個canvas實例都會占用大量內存，而且也不是非常理想的性能。 同樣，使用這種方法，我將不得不限制允許的最大undo/redo次數。 如果繼續采用這種方法，我應該保留的undo/redo的理想數量是多少。 另外，考慮到上述功能，是否有更好的方法。

Answer 1

使用command設計模式，然后從命令歷史記錄中重新繪制畫布。 您將能夠節省大量步驟（幾百個甚至幾千個）。

簡而言之，您可以將操作包裝在添加到列表中的命令中，然后執行，而不是直接在畫布上繪制。 當用戶想要撤消操作時，可以從列表中刪除最后一個操作，然后重播它。 您還可以保持列表完整，並更新index marker以允許重做。

在您的情況下，您還將具有用於選擇工具的命令，因此選擇也將被“記錄”到您的歷史記錄中。

一旦開始使用此模式，您可能會發現使用state對象可以更好地構建整個應用程序， state對象包裝在使用commit操作進行所有訪問的store中。 然后您可以免費獲得撤消重做。 有關此store設計的實際標准，請參見redux ， vuex和flux 。 盡管這些庫功能強大，但它們確實精簡且非常簡單。

https://en.wikipedia.org/wiki/Command_pattern

Answer 2

命令模式的替代方法是記憶模式 ，您可以在每次執行操作時簡單地存儲畫布的當前狀態。 這需要更多的內存，通常只需要進行少量編輯即可。 不過，恢復較早的狀態應該很快。