如何在Konva.js中实现命令类Command类以支持撤销和重做功能？-js教程-PHP中文网

如何在Konva.js中实现命令类Command类以支持撤销和重做功能？

聖光之護

发布： 2025-03-23 08:56:03

原创

853人浏览过

如何在konva.js中实现命令类command类以支持撤销和重做功能？

Konva.js中基于命令模式的撤销重做功能实现

本文介绍如何在Konva.js绘图应用中，利用命令模式实现撤销(Ctrl+Z)和重做(Ctrl+Y)功能。我们将图形操作封装成命令对象，并使用命令栈管理这些操作，从而实现图形编辑的回退和前进。

首先，定义一个基础Command类：

class Command {
  constructor() {
    this.states = []; // 用于存储状态快照
  }

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

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

  saveState(state) {
    this.states.push(state);
  }

  restoreState() {
    return this.states.pop() || null; // 返回上一个状态，或null
  }
}

登录后复制

接下来，创建一个具体的命令类，例如绘制矩形的命令：

class DrawRectangleCommand extends Command {
  constructor(stage, layer, rect) {
    super();
    this.stage = stage;
    this.layer = layer;
    this.rect = rect;
  }

  execute() {
    this.saveState(this.layer.toJSON()); // 保存当前图层状态
    this.layer.add(this.rect);
    this.layer.draw();
  }

  undo() {
    this.rect.destroy();
    const prevState = this.restoreState();
    if (prevState) {
      this.layer.destroyChildren(); // 清空图层
      this.layer = Konva.Node.create(prevState, this.stage); // 恢复上一个状态
      this.stage.add(this.layer);
      this.layer.draw();
    }
  }
}

登录后复制

然后，实现命令管理器：

牛小影

牛小影 - 专业的AI视频画质增强器

420

查看详情

class CommandManager {
  constructor() {
    this.undoStack = [];
    this.redoStack = [];
  }

  executeCommand(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);
  }
}

登录后复制

最后，在Konva.js应用中使用：

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const commandManager = new CommandManager();

stage.on('click', (e) => {
  const rect = new Konva.Rect({
    x: e.evt.layerX,
    y: e.evt.layerY,
    width: 50,
    height: 50,
    fill: 'red',
    draggable: true
  });

  const command = new DrawRectangleCommand(stage, layer, rect);
  commandManager.executeCommand(command);
});

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'z') {
    commandManager.undo();
  } else if (e.ctrlKey && e.key === 'y') {
    commandManager.redo();
  }
});

登录后复制

这段代码实现了简单的矩形绘制和撤销重做功能。您可以扩展Command类来支持其他图形操作，例如移动、缩放、旋转等。记住在每个操作的execute方法中保存当前状态，并在undo方法中恢复之前状态。这将确保您的撤销重做功能能够正确工作。

以上就是如何在Konva.js中实现命令类Command类以支持撤销和重做功能？的详细内容，更多请关注php中文网其它相关文章！