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

Question

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

我在使用撤消功能时遇到问题–我想我已经接近了，但这就是问题所在

首先，我将告诉您绘图应用程序的基础知识–如果您查看js文件，那么我将对四个不同的画布进行分层http://www.dev.1over0.com/canvas/js/canvas_web.js在顶部，我对画布的所有评论

当用户使用工具进行绘制时-实际上它首先是在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索引，但不会消除图像，因此您必须单击两次好让我感到困惑

因此，如果您可以尝试在彼此顶部绘制三个矩形，则可以单击“撤消”按钮，它会影响z-index-单击它三次，您会明白我的意思，所以它可以正常工作；也许-{

Answer 1

在绘制最后一个图像之前，您必须先清除画布，否则它将在先前的画布上绘制一个图像。 另外，您弹出的最后一张图像就是您刚刚按下的图像（这就是为什么您必须单击两次的原因）。 因此，请尝试这样的操作（您可能需要改编代码，但不确定该代码是否可以立即使用）

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