Question

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

我遇到了撤消功能的问题 - 我想我已经接近了，但这是问题

首先，我将告诉您绘图应用程序的基础知识 - 我正在分层绘制四种不同的画布 http://www.dev.1over0.com/canvas/js/canvas_web.js 如果你看看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-index但不会消除图像你必须点击它两次，这让我感到困惑

所以如果你可以尝试在彼此的顶部画出三个矩形您可以单击撤消按钮，它将影响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');
        }
     }                
}

尝试在canvas画面程序中调试撤消功能

1 个答案: