React-Konva：用撤销/重做功能构建一个强大的在线制图应用（完结篇）

前端

2023-11-19 00:28:05

在 предыдущей части нашей серии, 我们探讨了如何在 React-Konva 中使用拖放、变形和导出功能来构建一个全面的在线制图应用程序。今天，我们将为这个应用程序添加一个必不可少的特性：撤销和重做功能。

撤销和重做操作在任何设计或编辑工具中都是至关重要的，因为它允许用户在工作过程中探索不同的可能性，而不必担心永久性错误。在本文中，我们将深入探讨如何使用 React 和 Konva 实现撤销和重做功能。

React-Konva 中的撤销和重做

React-Konva 不提供开箱即用的撤销/重做功能，但我们可以使用 Redux 或 Zustand 等状态管理库轻松实现它。

在我们的示例中，我们将使用 Zustand，因为它是一种轻量级且易于集成的库。我们将创建一个存储应用程序状态的 Zustand 存储，包括当前场景、撤销堆栈和重做堆栈。

撤销和重做操作

撤销操作将应用程序状态还原到其先前的状态。要实现这一点，我们将从撤销堆栈中弹出顶部的状态，并将应用程序状态设置为该弹出的状态。

重做操作与撤销相反。它将应用程序状态设置为重做堆栈顶部的状态，并从重做堆栈中弹出该状态。

UI 集成

撤销和重做操作通常通过按钮或菜单项公开给用户。在我们的示例中，我们将向应用程序 UI 添加两个按钮：一个用于撤销，另一个用于重做。

键盘快捷键

除了按钮之外，我们还将添加键盘快捷键，以便用户可以快速访问撤销和重做操作。我们将使用 React Hotkeys 库来实现此功能。

示例代码

以下是一个 React-Konva 应用程序的示例代码，其中实现了撤销和重做功能：

import { useStore } from 'zustand';
import { Stage, Layer } from 'react-konva';

const store = useStore((state) => state);

const App = () => {
  const undo = () => {
    const previousState = store.getState().undoStack.pop();
    store.setState({ ...previousState });
  };

  const redo = () => {
    const nextState = store.getState().redoStack.pop();
    store.setState({ ...nextState });
  };

  return (
    <div>
      <Stage>
        <Layer>
          {/* 你的 Konva 图形 */}
        </Layer>
      </Stage>

      <button onClick={undo}>撤销</button>
      <button onClick={redo}>重做</button>
    </div>
  );
};

export default App;