Reset Leinwand und laden mit JSON in Fabric.js

Ich bin etwas zu bauen wie die kitchensink Beispiel, außer, dass ich in der Lage sein müssen, mehrere Ansichten.

http://fabricjs.com/kitchensink

Visitenkarte:
Vorder-und Rückseite

Beim Bearbeiten Speichere ich die JSON-periodisch.

Wenn Sie möchten, Bearbeiten Sie die zurück, ohne die Seite neu zu laden (da bin ich mit AngularJS), wie kann ich wischen Sie die aktuelle Leinwand und laden Sie neue JSON?

Ich bin derzeit laden des JSON, klicken Sie auf Ansicht ändern, ich Laufe canvas.clearContext(), und laden Sie die neue JSON. Dies ist nicht so zu arbeiten, wie ich es erwartet hatte.

Update

Ich bin mit der Richtlinie zum verwalten dieser Leinwand. Ich war die Richtlinie instanziieren, wenn JSON verfügbar war und wenn ich versuchte, Sie zu aktualisieren, aus welchem Grund auch immer, nicht funktionieren würde.

Habe ich entfernt und aus der Richtlinie selbst initiieren leer und jetzt muss ich nur loadJson über service. Yay!

InformationsquelleAutor Michael J. Calkins | 2014-01-17
  1. 25

    Normalerweise canvas.loadFromJSON() löscht den gesamten canvas-Bereich vor dem laden von neuen Objekten. Ansonsten kann man laufen canvas.clear();.

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

    Wie wollen Sie laden Ihre JSON?

    Etwas wie dies funktionieren sollte:

    var json = canvas.toJSON();

canvas.clear();

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

    Nach dem laden von JSON ist es wichtig zu nennen canvas.renderAll(). In der 2. parameter von canvas.loadFromJSON(json, callback) können Sie festlegen, cllback Funktion, die aufgerufen wird, nachdem alle Objekte geladen sind/Hinzugefügt.

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

    • Ich änderte die Weise, die ich rief loadFromJSON und es funktioniert jetzt perfekt... ich werde dies hinzufügen, github.com/clouddueling/angular-common irgendwann an diesem Wochenende. Hier ist die inprogress-code wenn Sie interessiert sind gist.github.com/clouddueling/8475865
    • Würden Sie geschehen, zu wissen, wie Sie erstellen tests für angularjs, die kitchensink app?
    InformationsquelleAutor Kienz
Schreibe einen Kommentar