尝试在画布绘制程序中调试撤消功能

Question

这是我的页面 http://www.dev.1over0.com/canvas/canvas_web.html

我在撤消功能方面遇到问题 - 我想我快要接近了，但问题出在这里

首先我会告诉你绘图应用程序的基础知识——我将四个不同的画布分层 http://www.dev.1over0.com/canvas/js/canvas_web.js 如果你查看 js 文件，你会在顶部看到我所有的 cmets 都在使用画布做些什么

当用户使用工具进行绘制时——它实际上是先在 imageTemp 画布上临时绘制的—— 每个工具都有自己的对象（铅笔、矩形、线条） 包含用于 mousedown、mousemove 和 mouseup 事件的函数

在 mouseup 事件结束时它调用这个函数

function img_update() {
contexto.drawImage(canvas, 0, 0);
saveActions();
context.clearRect(0, 0, canvas.width, canvas.height);
}

这里临时画布上的图像最终被绘制在 imageView 画布上，因此基本上每次都会擦除 imageTemp 画布

所以对于撤销功能，我首先声明一个空数组

var undoHistory = [];

我还声明了一个新图像

var undoImg = new Image();

当 img_update 被调用时——它会调用另一个函数 saveActions

function saveActions() {
var imgData = canvaso.toDataURL("image/png");
undoHistory.push(imgData);
$('#undo_canvas button').removeAttr('disabled');
}

在这个函数中——我实际上是将新绘制的图像画布保存到 undoHistory 数组中 这似乎工作正常（我相信） 因此，每次更新永久 imageView 画布后，都会将该状态保存到数组中

现在，如果您注意到一旦您绘制了图像并将其保存到 imageView 画布中，撤消按钮就会启用

所以如果你点击撤销按钮，它会调用这个函数

function undoDraw() {
if(undoHistory.length > 0){ 
$(undoImg).load(function(){
contexto.drawImage(undoImg, 0,0);
 });
undoImg.src = undoHistory.pop();
if(undoHistory.length == 0) { 
$('#undo_canvas button').attr('disabled','disabled');
}
}
}                              

这里我要做的是获取之前的图像状态并将其绘制在画布上 它的工作方式会影响图像的 z-index，但不会消除图像 而且您还必须单击它两次，这让我感到困惑

所以如果你可以尝试画出三个相互重叠的矩形 您可以单击撤消按钮，它会影响 z-index - 单击它三下您会明白我的意思，所以它有点工作，也许;-{

Answer 1

在绘制最后一张图片之前必须先清空canvas，否则会在之前的canvas上绘制一张图片； 此外，您弹出最后一张图片，这是您刚刚推入的图片（这就是您必须单击两次的原因）。所以尝试这样的事情（你可能需要修改代码，我不确定它是否可以开箱即用）

function undoDraw(){
   if(undoHistory.length > 0){ 
      $(undoImg).load(function(){
          contexto.clearRect(0,0, canvas.width, canvas.height);     
          contexto.drawImage(undoImg, 0,0);
     });
   undoHistory.pop();
   undoImg.src = undoHistory.pop();
   if(undoHistory.length == 0) { 
   $('#undo_canvas button').attr('disabled','disabled');
        }
     }                
}