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

J'ai un Croquis app fait dans tous les HTML5 et Javascript, et je me demandais comment je pourrais créer un Bouton Annuler, de sorte que vous pouvez annuler la dernière chose que vous avez dessiné. Une idée?

source d'informationauteur

  1. 13

    Vous avez à stocker toutes les modifications dans un discbased. Ensuite, vous pouvez supprimer la dernière modification si l'utilisateur veut annuler. Ensuite, vous repeindre toutes les opérations de dessin à partir de votre discbased de nouveau.

  2. 3

    Sur http://arthurclemens.github.io/Javascript-Undo-Manager/ j'ai un exemple de travail de l'annuler avec un élément canvas. Lorsque vous apportez une modification, vous nourrissez l'annuler gestionnaire de l'annuler et rétablir des méthodes. Le suivi de la position dans la pile d'annulation est effectuée automatiquement. Source code est sur Github.

  3. 1

    L'autre option, si vous avez besoin de manipuler des objets est de convertir votre toile de SVG à l'aide d'une bibliothèque, qui conserve la Toile de l'API de la prévention de la réécriture.

    Au moins une telle bibliothèque n'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 l'ensemble de la toile.

  4. 0

    Voici une solution qui fonctionne pour moi. Je l'ai essayé dans les dernières versions de Firefox et de Chrome et ça 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();

    De sorte que chaque fois que vous dessinez quelque chose vous aura-t-il après l'exécution de la fonction canvasLogBook.logDrawing() pour enregistrer un instantané de la toile et puis vous pouvez appeler canvasLogBook.annuler() pour annuler et canvasLogBook.redo() à refaire.