KonvaJS 命令模式：轻松实现图形操作的撤销与重做
本文介绍如何在 KonvaJS 绘图系统中集成命令模式，实现图形操作的撤销 (Ctrl+Z) 和重做 (Ctrl+Y) 功能。 我们将记录每个操作，并利用命令模式优雅地管理这些操作历史。
首先，我们需要定义一个 Command 基类，它包含 execute() 和 undo() 两个核心方法：
class Command {
constructor() {}
execute() {}
undo() {}
}
接下来，创建一个 CommandManager 类来管理命令历史。它使用数组存储命令，并用索引跟踪当前操作位置：
class CommandManager {
constructor() {
this.commands = [];
this.currentIndex = -1;
}
addCommand(command) {
this.currentIndex++;
this.commands = this.commands.slice(0, this.currentIndex); // 清除后续命令
this.commands.push(command);
}
undo() {
if (this.currentIndex >= 0) {
this.commands[this.currentIndex].undo();
this.currentIndex--;
}
}
redo() {
if (this.currentIndex < this.commands.length - 1) {
this.currentIndex++;
this.commands[this.currentIndex].execute();
}
}
}
然后，为每种图形操作创建具体的命令类，继承自 Command 类。例如，添加矩形的命令：
class AddRectangleCommand extends Command {
constructor(stage, x, y, width, height, fill) {
super();
this.stage = stage;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.fill = fill;
this.rectangle = null;
}
execute() {
this.rectangle = new Konva.Rect({
x: this.x,
y: this.y,
width: this.width,
height: this.height,
fill: this.fill,
});
this.stage.add(this.rectangle);
this.stage.draw();
}
undo() {
this.rectangle.destroy();
this.stage.draw();
}
}
在 KonvaJS 的事件处理中，创建并执行相应的命令，并将命令添加到 CommandManager 中。 例如，在矩形绘制完成时：
const commandManager = new CommandManager();
// ... KonvaJS 初始化代码 ...
// 矩形绘制完成后的处理
const addRectCommand = new AddRectangleCommand(stage, x, y, width, height, 'red');
commandManager.addCommand(addRectCommand);
addRectCommand.execute();
// Ctrl+Z 和 Ctrl+Y 的事件监听
document.addEventListener('keydown', (event) => {
if (event.ctrlKey && event.key === 'z') {
commandManager.undo();
} else if (event.ctrlKey && event.key === 'y') {
commandManager.redo();
}
});
通过这种方式，我们便可以利用命令模式有效地管理 KonvaJS 图形操作的历史记录，实现撤销和重做功能，提升用户体验。 记住为每种操作创建相应的命令类，并确保 execute() 和 undo() 方法正确地操作 KonvaJS 对象和舞台。 此外，考虑添加更复杂的命令，例如移动、缩放、旋转等图形操作。
