如何轻松使用 React-Konva 构建撤销/重做功能

2023-09-06 15:30:14

前言

在构建交互式绘图应用程序时，撤销/重做功能至关重要，它允许用户轻松更正错误或尝试不同的设计方案。React-Konva 是一个强大的 JavaScript 库，它使在 React 应用程序中创建基于 Canvas 的绘图应用程序变得轻而易举。在本教程中，我们将深入探讨如何在 React-Konva 中实现撤销/重做功能，让你一步步构建一个功能强大的在线制图工具。

1. 状态管理

撤销/重做功能的核心在于管理应用程序的状态。我们需要跟踪应用程序中当前的绘图状态，以便在需要时轻松撤消或重做更改。我们可以使用 React 的 useState 钩子来管理此状态：

import { useState } from "react";

const App = () => {
  const [state, setState] = useState({
    shapes: [], // 存储所有形状
    history: [] // 存储撤销/重做操作
  });

  return (
    // ...
  );
};

2. 记录动作

当用户执行可撤销/重做的操作时，例如添加、删除或移动形状，我们需要记录这些操作。我们可以创建一个自定义钩子来处理此操作记录：

import { useRef, useEffect } from "react";

const useActionLogger = (state, setState) => {
  const actionStack = useRef([]);

  useEffect(() => {
    // 在每次状态更新时记录动作
    actionStack.current.push(state);
  }, [state]);

  const undo = () => {
    // 如果有可撤销的操作，则执行撤销操作
    if (actionStack.current.length > 1) {
      setState(actionStack.current.pop());
    }
  };

  const redo = () => {
    // 如果有可重做的操作，则执行重做操作
    if (actionStack.current.length > 0) {
      setState(actionStack.current[actionStack.current.length - 1]);
      actionStack.current.pop();
    }
  };

  return { undo, redo };
};

3. 事件处理

接下来，我们需要处理用户触发的撤销/重做事件。我们可以使用 React 的 useEffect 钩子来监听键盘快捷键或按钮点击：

import { useEffect } from "react";

const App = () => {
  const { undo, redo } = useActionLogger(state, setState);

  useEffect(() => {
    // 监听键盘快捷键
    const handleKeyDown = (e) => {
      if (e.key === "z" && e.ctrlKey) {
        undo();
      } else if (e.key === "y" && e.ctrlKey) {
        redo();
      }
    };

    // 添加事件监听器
    window.addEventListener("keydown", handleKeyDown);

    // 卸载时移除事件监听器
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return (
    // ...
  );
};

4. 集成

最后，我们将撤销/重做功能集成到 React-Konva 应用程序中：

import { Stage, Layer, Circle } from "react-konva";

const App = () => {
  const { shapes, history, undo, redo } = useActionLogger(state, setState);

  return (
    <Stage>
      <Layer>
        {shapes.map((shape) => (
          <Circle key={shape.id} {...shape} />
        ))}
      </Layer>
    </Stage>
  );
};