前端图形学实战: 100行代码实现几何画板的撤销重做等功能(vue3 + vite版)

hello, 大家好, 我是徐小夕, 今天又到了我们的博学时间。

本文是 100+前端几何学应用案例 专栏的第三篇文章, 在第一篇文章 几何学在前端边界计算中的应用和原理分析 和第二篇文章 前端图形学实战: 从零开发几何画板(vue3 + vite版) 中我介绍了几何学在前端领域的应用以及如何从零开发一个几何画板:

2022-10-15 20.46.21.gif

如果大家感兴趣可以在 gitee 查看我的具体代码实现: https://gitee.com/lowcode-china/euryd

接下来就继续上次的话题, 来从零实现几何画板的撤销和重做功能。

我们都知道各种设计工具如figma, PhotoShop, 或者最近比较火的可视化低代码平台如H5-Dooring 都有撤销和重做功能, 主要是为了降低用户的误操作成本, 带来更好的搭建体验, 并且这两个功能基本成为了可视化领域的标配功能, 接下来我将带大家介绍一下市面上常用的几种撤销重做的实现方案以及撤销和重做功能底层的实用价值。

你将收获

• 撤销重做的实现思路

• vue 和 react 框架下的撤销重做库介绍

• 从零实现几何画板的撤销重做功能

• 挖掘 撤销重做 的扩展场景

demo演示

技术实现

在实现撤销重做功能之前, 我们需要先理清设计思路, 这样才能让自己的代码更健壮。

实现思路

分析了几种撤销重做的场景后我总结出如下几个要点:

• 支持基础的撤销重做能力(取消和恢复用户操作的能力)

• 需要限制最大可操作记录数(防止历史记录数过大导致前端性能问题)

• 操作记录的当前索引(方便做更可控的撤销重做控制)

• 在撤销的过程中发生的任何改动, 都会清空当前步骤之后的所有记录

• 操作历史持久化(可选, 即是否需要在用户刷新页面之后仍然保留操作记录历史)

为了让大家更好的理解这些要点,我画了一个 撤销重做 过程的流程图:

image.png

image.png

还有一点需要注意的是: 在撤销的过程中发生的任何改动, 都会清空当前步骤之后的所有记录，最终产生一个新的状态分支：