如何在Konva.js绘图系统中实现撤销和重做功能？

本文介绍如何在Konva.js绘图系统中集成撤销和重做功能，通过实现命令模式（Command Pattern）来优雅地管理绘图操作。

命令模式简介

命令模式是一种行为型设计模式，它将请求封装成对象，从而使你能够参数化客户端请求、排队或记录请求日志，以及支持撤销操作。

实现步骤

1. 定义Command接口/基类: 创建一个Command接口或基类，定义execute()和undo()方法。

   

   腾讯智影-AI数字人

   基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

   下载

   class Command {
     execute() {
       throw new Error('execute method must be implemented');
     }
     undo() {
       throw new Error('undo method must be implemented');
     }
   }

2. 创建具体命令类: 为每种绘图操作创建具体的命令类，继承自Command并实现execute()和undo()方法。例如，添加形状的命令：

   class AddShapeCommand extends Command {
     constructor(shape, layer) {
       super();
       this.shape = shape;
       this.layer = layer;
     }
     execute() {
       this.layer.add(this.shape);
       this.layer.draw();
     }
     undo() {
       this.shape.remove();
       this.layer.draw();
     }
   }

3. 实现命令管理器(CommandManager): 创建一个CommandManager来管理命令历史。

   class CommandManager {
     constructor() {
       this.undoStack = [];
       this.redoStack = [];
     }
     execute(command) {
       command.execute();
       this.undoStack.push(command);
       this.redoStack = []; // 清空重做栈
     }
     undo() {
       if (this.undoStack.length === 0) return;
       const command = this.undoStack.pop();
       command.undo();
       this.redoStack.push(command);
     }
     redo() {
       if (this.redoStack.length === 0) return;
       const command = this.redoStack.pop();
       command.execute();
       this.undoStack.push(command);
     }
   }

4. 集成到Konva.js: 在你的Konva.js绘图代码中，为每个用户操作创建相应的命令对象，并使用CommandManager执行、撤销和重做。

   const commandManager = new CommandManager();
   const layer = new Konva.Layer();
   
   // 添加形状
   const rect = new Konva.Rect({ x: 10, y: 10, width: 50, height: 50 });
   const addRectCommand = new AddShapeCommand(rect, layer);
   commandManager.execute(addRectCommand);
   
   // 撤销/重做 (例如，使用键盘快捷键 Ctrl+Z/Ctrl+Y)
   document.addEventListener('keydown', (e) => {
     if (e.ctrlKey && e.key === 'z') commandManager.undo();
     if (e.ctrlKey && e.key === 'y') commandManager.redo();
   });

通过以上步骤，你就可以在Konva.js应用中实现强大的撤销和重做功能，提升用户体验。 记住，你需要为每种Konva.js操作（例如移动、缩放、旋转、删除形状等）创建相应的命令类。