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? P>
4 Réponses :
Vous devez stocker toutes les modifications dans une DataStructure. Ensuite, vous pouvez supprimer la dernière modification si l'utilisateur veut
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?
J'ai corrigé quelques petits bugs de dessin dans la démo.
Cette démo dessine des cercles de différentes couleurs en chrome et en opéra, rien si FF et couleurs noires dans IE. Assez étrange. J'aimerais un suivi quand cela est corrigé.
J'ai mis à jour l'URL de démonstration de sorte que cela pointe vers la dernière version.
L'autre option, si vous devez manipuler des objets consiste à convertir votre toile en SVG en utilisant une bibliothèque qui conserve l'API de la toile empêchant une réécriture. P>
Au moins une de ces bibliothèques existe à ce stade (novembre 2011): svgkit p>
Une fois que vous avez SVG, il est beaucoup plus facile de supprimer les objets et beaucoup plus sans la nécessité de redessiner toute la toile. P>
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.
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();
Ce serait une bonne réponse si vous ne dépendez pas de jQuery et si vous vous débarrassez du isfirefox code> booléen :)
Checkout the modèle de commande
Pourquoi avez-vous Java et Objective-C dans des balises?