Comment ajouter une fonctionnalité d'annulation à HTML5 Canvas?

Question

J'ai une application Sketching faite dans tous les HTML5 et Javascript, et je me demandais comment je pourrais créer un bouton Annuler, afin que vous puissiez annuler la dernière chose que vous avez dessinée. Une idée?

Answer 1

Vous devez stocker toutes les modifications dans une structure de données. Ensuite, vous pouvez supprimer la dernière modification si l'utilisateur veut annuler il. Ensuite, vous repeignez toutes les opérations de dessin de votre structure de données.

Answer 2

Sur http://arthurclemens.github.io/Javascript-Undo-Manager/ J'ai un exemple de travail d'annulation avec un élément de canevas. Lorsque vous effectuez une modification, vous indiquez au gestionnaire d'annulation les méthodes d'annulation et de rétablissement. Le suivi de la position dans la pile d'annulation est effectué automatiquement. Le code source est à Github.

Answer 3

L'autre option, si vous avez besoin de manipuler des objets, est de convertir votre canevas en SVG en utilisant une bibliothèque qui préserve l'API Canvas en empêchant une réécriture.

Au moins une telle bibliothèque existe à ce moment (Novembre 2011): SVGKit

Une fois que vous avez SVG, il est beaucoup plus facile de supprimer des objets et bien plus encore, sans la nécessité de redessiner toute la toile.

Answer 4

Voici une solution qui fonctionne pour moi. Je l'ai essayé dans les dernières versions de Firefox et Chrome et cela fonctionne très bien dans ces deux navigateurs.

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(); 

Ainsi, chaque fois que vous dessinez quelque chose vous y après la fonction d'exécution canvasLogBook.logDrawing() pour stocker un instantané de la toile et vous pouvez appeler canvasLogBook.undo() pour annuler et canvasLogBook.redo() refaire