Javascript 正在尝试调试canvas paint程序中的撤消功能
这是我的页面 我在撤销功能方面遇到了问题——我想我已经接近了,但问题是 首先,我将告诉您绘图应用程序的基本知识–我将对四个不同的画布进行分层 如果你看js文件,你会在顶部看到我对画布所做的所有评论 当用户使用工具进行绘制时–实际上,它首先临时在imageTemp画布上绘制它– 每个工具都有自己的对象(铅笔、矩形、线) 其中包含用于mousedown、mousemove和mouseup事件的函数 在mouseup事件结束时,它调用此函数Javascript 正在尝试调试canvas paint程序中的撤消功能,javascript,jquery,html,canvas,paint,Javascript,Jquery,Html,Canvas,Paint,这是我的页面 我在撤销功能方面遇到了问题——我想我已经接近了,但问题是 首先,我将告诉您绘图应用程序的基本知识–我将对四个不同的画布进行分层 如果你看js文件,你会在顶部看到我对画布所做的所有评论 当用户使用工具进行绘制时–实际上,它首先临时在imageTemp画布上绘制它– 每个工具都有自己的对象(铅笔、矩形、线) 其中包含用于mousedown、mousemove和mouseup事件的函数 在mouseup事件结束时,它调用此函数 function img_update() { conte
function img_update() {
contexto.drawImage(canvas, 0, 0);
saveActions();
context.clearRect(0, 0, canvas.width, canvas.height);
}
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');
}
}
}
在这里,临时画布上的图像最终被绘制在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 img_update() {
contexto.drawImage(canvas, 0, 0);
saveActions();
context.clearRect(0, 0, canvas.width, canvas.height);
}
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索引–单击它三次,您将看到我的意思,因此它可能会工作-{在绘制最后一幅图像之前,必须清除画布,否则它将在上一幅画布上绘制图像; 另外,你弹出的最后一个图像是你刚刚推进去的图像(这就是为什么你必须点击两次)。因此,尝试类似的方法(你可能需要修改代码,我不确定它是否能在开箱即用)
谢谢Thomas-你的回答很有帮助-我把这行代码放在加载函数contexto.clearRect(0,0,canvas.width,canvas.height)之前工作得更好;最后一个撤销功能似乎正在发挥作用-我希望能够像撤销历史记录一样不断点击撤销按钮,但这需要更多的工作,我想,但是最后一个撤销功能现在正在发挥作用-如果你再次检查链接,你就会知道我的意思,谢谢againI,你可以检查这个主题,他说很有意思的问题,但很遗憾我无法访问链接。自从你问这个问题以来,这个网站还在运行吗?