Angular中Canvas绘图撤销（Undo）功能异常问题排查

问题原因 #

你的撤销功能异常，核心问题出在drawPaths方法的绘制逻辑上：遍历路径数组时，所有线条的起点都被错误设置成了整个lineTo数组的最后一个点，而不是当前路径的起始点。这导致每次重绘时，所有线条都会错误地连到最后一个点，撤销操作后的显示自然不符合预期。

修复代码 #

修正drawPaths方法 #

drawPaths() {
  // 清空画布
  this.cx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  // 遍历所有路径重新绘制
  this.lineTo.forEach((path: any) => {
    this.cx.beginPath();
    // 用当前路径的第一个点作为起点，而不是整个数组的最后一个点
    const startPoint = path[0];
    this.cx.moveTo(startPoint.x, startPoint.y);
    for (let i = 1; i < path.length; i++) {
      this.cx.lineTo(path[i].x, path[i].y);
    }
    this.cx.strokeStyle = '#0652DD';
    this.cx.stroke();
  });
}

撤销方法保持不变 #

你的undo方法逻辑是对的，确保每次移除最后一条路径后调用重绘即可：

undo() {
  this.lineTo.splice(-1, 1);
  this.drawPaths();
}

额外注意 #

要保证lineTo数组里的每个元素都是一条独立的完整路径（比如鼠标按下到松开过程中记录的所有点组成的数组），这样撤销时移除最后一个元素才能精准删除最后绘制的线条。

内容的提问来源于stack exchange，提问作者Sathishkumar