Cómo agregar la funcionalidad de deshacer a HTML5 Canvas?

Question

Tengo una aplicación de bocetos en HTML5 y Javascript, y me preguntaba cómo crearía un botón Deshacer, por lo que podría deshacer lo último que haya dibujado. ¿Alguna idea?

Answer 1

Debe almacenar todas las modificaciones en una estructura de datos. A continuación, puede eliminar la última modificación si el usuario desea deshacer. Luego vuelve a pintar todas las operaciones de dibujo desde su estructura de datos.

Answer 2

En http://arthurclemens.github.io/Javascript-Undo-Manager/ Tengo un ejemplo funcional de deshacer con un elemento canvas. Cuando realiza una modificación, alimenta al administrador de deshacer los métodos de deshacer y rehacer. El seguimiento de la posición en la pila de deshacer se realiza automáticamente. El código fuente está en Github.

Answer 3

La otra opción, si necesita manipular objetos es convertir su lienzo a SVG utilizando una biblioteca que preserve el Canvas API evitando una reescritura.

Al menos uno de estos biblioteca existe en este momento (noviembre de 2011): SVGKit

Una vez que tenga SVG, es mucho más fácil de quitar objetos y mucho más sin la necesidad de volver a dibujar todo el lienzo.

Answer 4

Aquí hay una solución que funciona para mí. Lo probé en las últimas versiones de Firefox y Chrome y funciona muy bien en esos dos navegadores.

var isFirefox = typeof InstallTrigger !== 'undefined'; 
var ctx = document.getElementById('myCanvas').getContext("2d"); 
var CanvasLogBook = function() { 
    this.index = 0; 
    this.logs = []; 
    this.logDrawing(); 
}; 
CanvasLogBook.prototype.sliceAndPush = function(imageObject) { 
    var array; 
    if (this.index == this.logs.length-1) { 
     this.logs.push(imageObject); 
     array = this.logs; 
    } else { 
     var tempArray = this.logs.slice(0, this.index+1); 
     tempArray.push(imageObject); 
     array = tempArray; 
    } 
    if (array.length > 1) { 
     this.index++; 
    } 
    return array; 
}; 
CanvasLogBook.prototype.logDrawing = function() { 
    if (isFirefox) { 
     var image = new Image(); 
     image.src = document.getElementById('myCanvas').toDataURL(); 
     this.logs = this.sliceAndPush(image); 
    } else { 
     var imageData = document.getElementById('myCanvas').toDataURL(); 
     this.logs = this.sliceAndPush(imageData); 
    } 
}; 
CanvasLogBook.prototype.undo = function() { 
    ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
    if (this.index > 0) { 
     this.index--; 
     this.showLogAtIndex(this.index); 
    } 
}; 
CanvasLogBook.prototype.redo = function() { 
    if (this.index < this.logs.length-1) { 
     ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
     this.index++; 
     this.showLogAtIndex(this.index); 
    } 
}; 
CanvasLogBook.prototype.showLogAtIndex = function(index) { 
    ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
    if (isFirefox) { 
     var image = this.logs[index]; 
     ctx.drawImage(image, 0, 0); 
    } else { 
     var image = new Image(); 
     image.src = this.logs[index]; 
     ctx.drawImage(image, 0, 0); 
    } 
}; 
var canvasLogBook = new CanvasLogBook(); 

Así que cada vez que dibuje cualquier cosa que existe después de la función de ejecución canvasLogBook.logDrawing() para guardar una instantánea de la tela y luego se le puede llamar canvasLogBook.undo() para deshacer y canvasLogBook.redo() Rehacer.