Fonction Undo-Redo dans Fabric.js
Est-il un support intégré pour annuler/rétablir Fabric.js? Pouvez-vous svp me guider sur la façon dont vous avez utilisé cette annuler et répéter [http://printio.ru/][1]
source d'informationauteur John | 2013-09-27
Vous devez vous connecter pour publier un commentaire.
Dans http://jsfiddle.net/SpgGV/9/le déplacement de l'objet et de modifier sa taille. Si l'état de l'objet a changé, et puis nous ne undo/redo, son état précédent sera supprimé lors de la prochaine modification. Il est plus facile de faire annuler/refaire. Tous les événements de la toile doit être appelée avant tout élément est ajouté à la toile. Je n'ai pas ajouter un
object:remove
de l'événement ici. Vous pouvez l'ajouter vous-même. Si un élément est supprimé, l'état et la liste devrait être invalide si cet élément est dans ce tableau. La manière la plus simple est de mettrestate
etlist = []
etindex = 0
.Ce sera clairement l'état de votre commande undo/redo de la file d'attente. Si vous voulez garder tous les états, tels que l'ajout/suppression de, ma suggestion est d'ajouter plus de propriétés pour l'élément de votre état de tableau. Par exemple,
state = [{"data":object.originalState, "event": "added"}, ....]
. "L'événement" pourrait être "modifié" ou "ajouté" et situé à un correspondant de gestionnaire d'événements.Si vous avez ajouté un objet, puis définissez
state[index].event="added"
sorte que la prochaine fois, lorsque vous utilisez la fonction annuler, vous les consultez. Si c'est "ajouté", puis l'enlever de toute façon. Ou lorsque vous utilisez le refaire, si la cible est "ajouté", puis vous l'avez ajouté. J'ai récemment été très occupé. Je vais ajouter des codes à jsfiddle.net plus tard.Mise à jour: ajout de
setCoords()
;Mise à jour: la meilleure solution pour prendre de modifier l'histoire de l'algorithme en compte. Ici, nous pouvons utiliser
Editing.getInst().set(item)
où l'article peut être{action, object, state}
; Par exemple,{"add", object, "{JSON....}"}
.Je suis en permettant à l'utilisateur de supprimer le dernier chemin (dans mon application de peinture), cela fonctionne très bien pour moi:
Mais vous pouvez également supprimer l'instruction if et de laisser les gens enlever quoi que ce soit.
Vous pouvez utiliser "objet:ajout de" et/ou "objet:suppression de" pour que — fabricjs.com/events
Vous pouvez suivre ce post:
Avons-nous de la toile Modifié Événement Fabric.js?
Je sais que la réponse est déjà choisi, mais voici ma version du script est condensée, a également ajouté une réinitialisation à l'état d'origine. Après tout événement que vous souhaitez enregistrer appelez simplement saveState(); jsFiddle
Je sais que je suis en retard pour répondre à cela, mais c'est ma version de la mise en œuvre de cette. Peut être utile à quelqu'un.
J'ai implémenté cette fonctionnalité par le gain de la Toile États
JSON
. Chaque fois qu'un utilisateur ajoute ou modifie un objet dans leCanvas
il vous permettra d'économiser le changement de la toile de l'état et de le maintenir dans unarray
. Cettearray
est ensuite manipulé à chaque fois que l'utilisateur clique sur Annuler ou de Refaire bouton.Prendre un coup d'oeil à ce lien. J'ai également fourni un travail de Démonstration URL.
https://github.com/abhi06991/Undo-Redo-Fabricjs
HTML:
JS:
j'ai développé un petit script pour vous,j'espère qu'elle vous aidera .voir cette démo Violon
bien que refaire n'est pas parfait, vous devez cliquer sur minimum deux fois sur le bouton annuler, puis refaire le travail .vous pouvez facilement résoudre ce problème en donnant de simples conditions de refaire le code.
//Html
//script
J'ai réponse à toutes vos questions 🙂 obtenir un sourire
suivez ce lien.. sa fait ... copie & coller 😛
http://jsfiddle.net/SpgGV/27/