Konva.js中基于命令模式的撤銷重做功能實(shí)現(xiàn)

本文介紹如何在Konva.js繪圖應(yīng)用中，利用命令模式實(shí)現(xiàn)撤銷(Ctrl Z)和重做(Ctrl Y)功能。 我們將圖形操作封裝成命令對(duì)象，并使用命令棧管理這些操作，從而實(shí)現(xiàn)圖形編輯的回退和前進(jìn)。

首先，定義一個(gè)基礎(chǔ)Command類：

class Command {
  constructor() {
    this.states = []; // 用于存儲(chǔ)狀態(tài)快照
  }

  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; // 返回上一個(gè)狀態(tài)，或null
  }
}

接下來，創(chuàng)建一個(gè)具體的命令類，例如繪制矩形的命令：

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

  execute() {
    this.saveState(this.layer.toJSON()); // 保存當(dāng)前圖層狀態(tài)
    this.layer.add(this.rect);
    this.layer.draw();
  }

  undo() {
    this.rect.destroy();
    const prevState = this.restoreState();
    if (prevState) {
      this.layer.destroyChildren(); // 清空?qǐng)D層
      this.layer = Konva.Node.create(prevState, this.stage); // 恢復(fù)上一個(gè)狀態(tài)
      this.stage.add(this.layer);
      this.layer.draw();
    }
  }
}

然后，實(shí)現(xiàn)命令管理器：

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

  executeCommand(command) {
    command.execute();
    this.undoStack.push(command);
    this.redoStack = []; // 執(zhí)行新命令后，清空重做棧
  }

  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應(yīng)用中使用：

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

這段代碼實(shí)現(xiàn)了簡(jiǎn)單的矩形繪制和撤銷重做功能。 您可以擴(kuò)展Command類來支持其他圖形操作，例如移動(dòng)、縮放、旋轉(zhuǎn)等。 記住在每個(gè)操作的execute方法中保存當(dāng)前狀態(tài)，并在undo方法中恢復(fù)之前狀態(tài)。 這將確保您的撤銷重做功能能夠正確工作。

以上是如何在Konva.js中實(shí)現(xiàn)命令類Command類以支持撤銷和重做功能？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！