Réinitialisation de la toile et de le recharger avec JSON Fabric.js

Je suis en train de construire quelque chose comme la kitchensink exemple sauf que moi j'ai besoin d'être en mesure d'avoir plusieurs points de vue.

http://fabricjs.com/kitchensink

Carte De Visite:
l'avant et à l'arrière

Comme vous le modifier je enregistrer au format JSON périodiquement.

Lorsque vous souhaitez modifier l'arrière sans avoir à recharger la page (parce que je suis en utilisant AngularJS), comment puis-je essuyer la zone de travail et le recharger à nouveau JSON?

Je suis en train de charger le JSON, vous cliquez sur modifier l'affichage, je lance canvas.clearContext(), et de recharger le nouveau JSON. Ce n'est pas le même chemin que j'avais prévu.

Mise à jour

Je suis en utilisant une directive pour gérer cette toile. J'ai été prise de la directive instancier lors de JSON était disponible, et quand j'ai essayé de le mettre à jour, pour quelque raison que ce soit, ne fonctionnerait pas.

Je l'ai enlevé et la directive s'initier à vide, et maintenant, j'ai juste loadJson via le service. Yay!!!

OriginalL'auteur Michael J. Calkins | 2014-01-17

  1. 24

    Normalement canvas.loadFromJSON() efface l'ensemble de la toile avant de charger de nouveaux objets. Sinon, vous pouvez exécuter canvas.clear();.

    http://fabricjs.com/docs/fabric.Canvas.html#clear

    Comment faites-vous pour charger votre JSON?

    Quelque chose comme cela devrait fonctionner:

    var json = canvas.toJSON();

canvas.clear();

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

    Après le chargement JSON, il est important d'appeler canvas.renderAll(). Dans le 2e paramètre de canvas.loadFromJSON(json, callback) vous pouvez définir un cllback fonction qui est appelée une fois que tous les objets sont chargés/ajoutée.

    http://fabricjs.com/docs/fabric.Canvas.html#loadFromJSON

    J'ai changé la façon dont j'ai été l'appel de loadFromJSON et il fonctionne à la perfection... je vais l'ajouter à github.com/clouddueling/angular-common parfois, ce week-end. Voici le code en cours si vous êtes intéressé gist.github.com/clouddueling/8475865
    Auriez-vous par hasard pour savoir comment vous pouvez créer angularjs tests pour que kitchensink application?

    OriginalL'auteur Kienz