实现撤销与恢复功能，让PPT制作更轻松

前端

2023-11-13 12:44:40

从撤销与恢复的逻辑着手，全面分析PPT制作中的各种情况

操作场景一：添加形状

撤销操作：当我们在PPT中添加一个形状时，如果想撤销该操作，只需要点击“撤销”按钮即可。此时，该形状将从幻灯片中删除。

恢复操作：如果我们想恢复撤销操作，只需要点击“恢复”按钮即可。此时，该形状将重新出现在幻灯片中。

操作场景二：移动形状

撤销操作：当我们在PPT中移动一个形状时，如果想撤销该操作，只需要点击“撤销”按钮即可。此时，该形状将移动到其原始位置。

恢复操作：如果我们想恢复撤销操作，只需要点击“恢复”按钮即可。此时，该形状将移动到其最新位置。

操作场景三：更改形状颜色

撤销操作：当我们在PPT中更改一个形状的颜色时，如果想撤销该操作，只需要点击“撤销”按钮即可。此时，该形状的颜色将恢复到其原始颜色。

恢复操作：如果我们想恢复撤销操作，只需要点击“恢复”按钮即可。此时，该形状的颜色将恢复到其最新颜色。

操作场景四：删除形状

撤销操作：当我们在PPT中删除一个形状时，如果想撤销该操作，只需要点击“撤销”按钮即可。此时，该形状将重新出现在幻灯片中。

恢复操作：如果我们想恢复撤销操作，只需要点击“恢复”按钮即可。此时，该形状将从幻灯片中删除。

实战出真知，用javascript语言实现撤销与恢复功能

在了解了撤销与恢复操作在PPT中的各种情况下的逻辑后，我们就可以使用javascript语言来实现撤销与恢复功能了。

// 撤销操作
function undo() {
  // 获取当前幻灯片的形状列表
  var shapes = slide.getShapes();

  // 获取最后一个形状
  var lastShape = shapes[shapes.length - 1];

  // 删除最后一个形状
  lastShape.remove();

  // 将撤销操作记录到历史记录中
  history.push({
    operation: "undo",
    shape: lastShape
  });
}

// 恢复操作
function redo() {
  // 获取历史记录中的最后一个操作
  var lastOperation = history.pop();

  // 根据操作类型执行相应的操作
  if (lastOperation.operation === "undo") {
    // 恢复形状
    slide.addShape(lastOperation.shape);
  }
}