如何撤消HTML5画布绘制应用的橡皮擦操作

Question

我已经创建了一个HTML5绘图应用程序，它具有基本功能，允许用户选择一种颜色来绘制，改变绘图工具的大小（半径），撤消，重做，以及完全清除画布。

我最近添加了一个橡皮擦工具，使用globalCompositionProperty（desitnation-out）擦除画布的选定区域。这部分工作良好，但当我去撤销擦除，整个画布被清除，重做功能不起作用。当我用常规的绘图工具（使用source-over）恢复绘图时，撤消/重做工作。我已经包含了应用程序中使用的一些函数的代码。每次脱离绘图工具时，我都会存储画布的快照。这将添加到用于撤消和还原画布的数组中。

有人能解释一下我在这里做错了什么吗？我不知道globalCompositeOperation属性如何影响保存的画布DataURI。

function storeSnapshot() {
    cStep++;
    if (cStep < cPushArray.length) { cPushArray.length = cStep; }
    cPushArray.push(canvas.toDataURL());
}

var putPoint = function(e){
    if(dragging){
    context.lineTo(e.clientX - 174, e.clientY - 50);
    context.stroke();
    context.beginPath();
    if(eraser == true){
        context.globalCompositeOperation="destination-out";

    }else{
        context.globalCompositeOperation="source-over"; 
    }
    context.arc(e.clientX - 174, e.clientY - 50 , radius, 0, 2 * Math.PI);
    context.fill();
    context.beginPath();
    context.moveTo(e.clientX - 174, e.clientY - 50);
    }
}

更新：在玩了一段时间后，我尝试了一些东西来修复我的问题。我不确定这是不是正确的做事方法，但我想我会让你们看看我做了什么。

我有一个脱离功能，在鼠标向上触发。下面是前面的函数：

var disengage = function(){
dragging = false;
context.beginPath();
storeSnapshot();
    }

我添加了这段代码，这允许用户使用橡皮擦工具和撤消/重做操作。我还不是很清楚为什么这会起作用，所以如果有人有洞察力的话，我会非常感激。

var disengage = function(){
dragging = false;
context.beginPath();
if(eraser == true)
{
    context.globalCompositeOperation="source-over"; 
}
storeSnapshot();
    }

Answer 1

我有和你完全一样的问题，我很高兴我遇到了你的问题/解决方案，因为这对我来说是一个电灯泡的时刻。我一看到你的解决方案，就完全明白是怎么回事了。

为了深入了解解决方案的工作原理，GlobalCompositeOperation是画布的一个属性，它基本上指示了如何将内容（在本例中为线条笔划）放在画布上。默认情况下，它是source-over，它只是在任何现有笔画的顶部放置一个新的行笔画。正如您所提到的，擦除使用的是目标输出，它保留所有现有内容，使其不与新的行笔画重叠（因此擦除）。对于一些信息丰富的图表和解释，我强烈推荐GlobalCompositeOperation的MDN文档:https://developer.mozilla.org/en-us/docs/web/api/CanvasRenderingContext2d/GlobalCompositeOperation

因此，如果进入擦除模式（对您来说，eraser=true)，擦除，然后立即尝试撤消，globalCompositeOperation仍然将设置为destination-out。这意味着当撤消尝试将存储的图像绘制到画布时，所有内容都将消失，因为它基本上仍在擦除（正如destination-out所说的，它将丢弃与新内容重叠的任何现有内容，在本例中，新内容是整个画布空间）。因此，您需要像在解决方案中所做的那样，将其设置回source-over，以便恢复的图像实际出现在画布上。希望能有帮助！