11
votes

Comment ajouter une fonctionnalité d'annulation à la toile HTML5?

J'ai une application de croquis effectuée dans tous les HTML5 et JavaScript, et je me demandais comment je créerais un bouton d'annulation, vous pourriez donc annuler la dernière chose que vous avez dessinée. Aucune idée?


2 commentaires

Checkout the modèle de commande


Pourquoi avez-vous Java et Objective-C dans des balises?


4 Réponses :


14
votes

Vous devez stocker toutes les modifications dans une DataStructure. Ensuite, vous pouvez supprimer la dernière modification si l'utilisateur veut annuler . Ensuite, vous penchez à nouveau toutes les opérations de dessin de votre DataStructure.


2 commentaires

S'il vous plaît voir Whiffdoc.appspot.com/tests/schema/diagram pour un exemple de comment Pour ce faire - dans ce cas en stockant une structure de données JSON représentant les informations sur la toile dans un élément divisible invisible. (Suivez le lien à la page à la source)


@Aaronwatters, ce lien me dirige vers 404. Avez-vous le lien mis à jour?




1
votes

5 commentaires

Ou il peut simplement utiliser une bibliothèque d'abstraction en toile, comme Tissu.js pour pouvoir travailler avec objets sur toile par programme.


Excellent @kangax. Je suis curieux, comment pensez-vous que tissu.js comparerait à SVGKIT en termes de performance lorsqu'il s'agit de modifier des objets de toile avec des centaines de nœuds?


Je ne sais pas comment il se compare à SVGKIT, mais en ce qui concerne le grand nombre d'objets, la toile a tendance à être plus performante que SVG. Regardez quelques points de repère comparant Raphaël (SVG-Basé) et Tissu (basé sur une toile) - FabricJs.com/benchmarks < / a>


Merci pour les points de repère mais ceux-ci se comparent à Raphaël uniquement pour des images statiques qui vont évidemment favoriser la toile. Avez-vous une référence de comparaison avec des animations?


Rien pour le moment. Je vais voir si je peux cuisiner quelque chose. Ou peut-être que quelqu'un d'autre sera.



1
votes

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


1 commentaires

Ce serait une bonne réponse si vous ne dépendez pas de jQuery et si vous vous débarrassez du isfirefox booléen :)