javascript - html canvas 中的撤消/重做功能

Question

我正在处理 html canvas 。我已经实现了以下功能:

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

现在，我想添加撤消/重做功能。

考虑到上述功能的实现，我正在考虑在每次事件执行时保存整个canvas的实例。例如，在执行形状调整大小时，我将整个 Canvas 实例插入一个数组中。

当用户单击撤消时，我只需弹出数组中的最后一个元素，然后重新绘制 Canvas 。

但是，我认为每次保存整个 canvas 实例将占用大量内存，而且性能也不是非常理想。另外，通过这种方法，我必须限制允许的最大撤消/重做次数。如果我继续采用这种方法，我应该保留的理想撤消/重做次数是多少。另外，考虑到上述特征，是否有更好的方法。

Answer 1

使用command设计模式，并根据命令历史记录重新绘制 Canvas 。您将能够节省大量步骤(数百甚至数千)。

简而言之，您将把操作包装在添加到列表中然后执行的命令中，而不是直接绘制到 Canvas 上。当用户想要撤消时，您可以从列表中删除最后一个操作，然后重播它。您还可以保持列表完整并更新 index marker以允许重做。

就您而言，您还会有用于工具选择的命令，因此选择也会“记录”到您的历史记录中。

一旦开始使用此模式，您可能会发现使用 state 可以更好地构建整个应用程序。对象，包裹在 store 中使用 commit所有访问的操作。然后您就可以免费获得撤消重做功能。请参阅redux , vuex ，和flux对于这个事实上的标准store设计。尽管这些库功能强大，但它们确实非常精简且非常简单。

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