HTML5 Canvas 绘图历史答案

【问题标题】：HTML5 Canvas Drawing HistoryHTML5 Canvas 绘图历史
【发布时间】：2014-11-07 07:19:56
【问题描述】：

我很想知道 Adobe Photoshop 等应用程序是如何实现其绘图历史的，能够返回或撤消光栅化图形上的笔触，而无需从头开始重新绘制每个笔触...

我想在我正在开发的 HTML5 绘图应用程序上实现类似的历史记录功能，但在每次绘制后复制画布似乎会占用太多内存而不是一种实用的方法，尤其是在较大的画布上' ...

关于如何以实用和有效的方式实施此功能的任何建议？

【问题讨论】：

不要尝试在每次描边后保存整个画布。将每个绘图命令保存到一个数组中。然后，您可以通过弹出数组末尾的最后一个元素、清除画布并重新绘制所有剩余元素（== 重新执行所有剩余的绘制命令）来撤消。
是的，这就是我要避免的，因为重绘需要很长时间...我想知道 Photoshop 和类似应用程序如何处理它，它们不会从一开始就重绘所有内容。 ..
Canvas 的速度足以从头开始重绘大多数绘图。虽然我没有 Photoshop 源代码，但我怀疑 PS 实际上确实使用命令从头开始重绘，而不是保存整个光栅断点。我这样说是因为 PS 历史记录列出了所有命令。 PS 动作当然是通过播放命令来工作的。
嗯，我已经在使用你建议的方法了，如果笔画很多或者我试图模糊并做其他相关动作，可能需要很长时间才能重绘。 ..因此，我正在寻找另一种方法。 :) 不过谢谢...
@markE 建议了正确的方向。重新绘制不应持续超过 10 毫秒，因此您应该对代码进行基准测试。请注意，您可以使用画布将图像存储在给定点，另一方面可以使用从该点到现在的命令堆栈。您有时会“剪切”堆栈并将存储的图像更新到命令堆栈的新开头。这样您就可以撤消和快速重绘-但时间有限-。但同样，我要检查的第一件事是为什么绘图需要这么多时间。毕竟，使用 Context2d 可以正常运行一些激烈的视频游戏（在桌面上）...

标签： javascript html canvas drawing undo

【解决方案1】：

我可能有一个解决方案.....

var ctx = document.getElementById("canvasId").getContext("2d");
var DrawnSaves = new Array();
var Undo = new Array();
var FigureNumber = 0;
var deletingTimer;
function drawLine(startX, startY, destX, destY) {
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(destX, destY);
    ctx.stroke();
    var Para = new Array();
    Para["type"] = "line";
    Para["fromX"] = startX;
    Para["fromY"] = startY;
    Para["toX"] = destX;
    Para["toY"] = destY;
    DrawnSaves.push(Para);
    FigureNumber++;
}
function undo() {
    ctx.beginPath();
    ctx.clearRect(0, 0, 500, 500);
    Undo[FigureNumber] = DrawnSaves[FigureNumber];
    DrawnSaves[FigureNumber] = "deleted";
    FigureNumber--;
    drawEverything();
    startTimeoutOfDeleting();
}
function undoTheUndo() {
    FigureNumber++;
    DrawnSaves[FigureNumber] = Undo[FigureNumber];
    drawEverything();
    clearTimeout(deletingTimer);
}
function drawEverything() {
    for (i = 0; i < DrawnSaves.length; i++) {
       if (DrawnSaves[i].type == "line") {
          ctx.beginPath();
          ctx.moveTo(DrawnSaves[i].fromX, DrawnSaves[i].fromY);
          ctx.lineTo(DrawnSaves[i].toX, DrawnSaves[i].toY);
          ctx.stroke();
       }
    }
}
function startTimeoutOfDeleting() {
   setTimeout(function() {Undo[FigureNumber] = "deleted";}, 5000);
}

这真的很简单，首先我在调用函数时画一条线，并将他的所有参数保存在一个数组中。然后，在撤消功能中，我只是启动了一个计时器，在 2000 毫秒内删除绘制的图形，清除整个画布并使其无法重绘。在 undoTheUndo 函数中，它停止定时器删除图形，并使图形可以重绘。在 drawEverything 函数中，它根据数组的类型（“此处的行”）绘制数组中的所有内容。而已... ：-）这是一个工作示例：This, after 2sec UNDOs then after 1sec UNDOTHEUNDO

【讨论】：