HTML5画布绘制历史记录 [英] HTML5 Canvas Drawing History

问题描述

我很好奇要知道诸如Adobe Photoshop之类的应用程序如何实现其绘图历史，从而能够在光栅化的图形上返回或撤消笔划，而不必从头开始重新绘制每个笔划...

I'm curious to know how applications such as Adobe Photoshop implement their drawing history with the ability to go back or undo strokes on rasterized graphics without having to redraw each stroke from the beginning...

我想在我正在处理的HTML5绘图应用程序上实现类似的历史记录功能，但是在每次笔画之后复制画布似乎会占用太多内存，因此不可行。尤其是在较大的画布上。...

I'm wanting to implement a similar history function on an HTML5 drawing application I'm working on but duplicating the canvas after every stoke seems like it'd use too much memory to be a practical approach, especially on larger canvas'...

关于如何以切实有效的方式实施此建议？

Any suggestions on how this might be implemented in a practical and efficient manner?

推荐答案

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

I may have a solution.....

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函数中，它根据类型（此处行）绘制数组中的所有内容。就这样... :-)
这是一个工作示例：这是在2秒撤消操作之后，然后在1秒撤消操作之后

This is really simple, first I draw a line when the function is called and save all his parameters in an array. Then , in the undo function I just start a timer do delete the figure drawn i 2000 miliseconds, clears the whole canvas and makes it can't be redrawn. in the undoTheUndo function, it stops the timer to delete the figure and makes that the figure can be redrawn. In the drawEverything function, it draws everything in the array based on it's type ("line here"). That's it... :-) Here is an example working : This, after 2sec UNDOs then after 1sec UNDOTHEUNDO

这篇关于HTML5画布绘制历史记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！