尝试调试撤消功能在画布上画图程序

Question

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

我在与撤消功能问题 - 我想我越来越接近，但这里的问题

首先我”会告诉你的绘图应用程序的基础知识 - 我分层四种不同的画布 http://www.dev.1over0.com/canvas/js/canvas_web.js 如果你看一下JS文件，你会在顶部看到什么，我用油画做我所有的意见

当用户使用一个工具绘制 - 它实际上吸引它首先临时对imageTemp画布 - 每个工具都有它自己的对象（铅笔，矩形，线条） 与职能范围内的鼠标按下，鼠标移动和的结尾鼠标松开事件

鼠标松开事件调用此函数

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

在此功能 - 我基本上保存新drawed图像帆布进入撤消历史阵列 这似乎是工作正常（我相信） 因此，每次永久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'); 
     } 
    }     
}