Ich versuche, Daten in JSON zu speichern und mit fabric.js wieder in den Erstellungsbereich zu laden. Ich erhalte immer wieder Fehler wie im folgenden einfachen Code:
%Vor%Ich bekomme:
%Vor%Wenn ich mein eigenes JSON benutze, wird es gut validiert, aber ich bekomme immer noch Fehler, wenn ich das verwende was von der Fabric-Methode canvas.toJSON () ausgegeben wurde. Jeder hätte Arbeitsbeispiele zum Zurückladen in eine leere Leinwand, die in einem früheren Canvas-Status in fabric.js gespeichert wurde? Es würde sehr geschätzt werden!
fabric.Canvas#toJSON gibt tatsächlich ein Objekt und keine JSON-Zeichenfolge zurück.
Tut mir leid, wenn das verwirrend ist.
Der Grund dafür ist JSON.stringify . Die Sache mit JSON.stringify ist, dass es benutzerdefinierte Serialisierung unterstützt; Alles, was Sie tun müssen, ist ein Objekt zu übergeben, das toJSON method hat. Und genau das habe ich in Fabric gemacht - fabric.Canvas hat toJSON method, was im Grunde ein Alias für toObject method ist.
Dies ermöglicht uns, Canvas zu serialisieren, indem Sie etwas so einfaches tun wie:
%Vor% .. wobei canvas eine Referenz auf fabric.Canvas instance ist.
Der Unterschied zwischen toObject und toDatalessObject (sowie toJSON und toDatalessJSON ) besteht darin, dass toDatalessObject anstelle der tatsächlichen Pfaddaten "url" zurückgibt. Dies geschieht, um die Größe der Canvas-Darstellung mit großen Formen zu speichern. Wenn Sie eine große SVG-Form laden, könnten ihre Pfaddaten buchstäblich zu mehreren Millionen Zeichen führen. Wenn Sie später diese Daten serialisieren müssen (zum Beispiel zum Speichern), ist es viel sinnvoller, Pfaddaten durch die URL der SVG-Form zu ersetzen. Stellen Sie sich vor, Sie müssten so große Strings auf den Server hochladen / herunterladen.
Also statt dessen:
%Vor%Du hättest das:
%Vor%Beachten Sie, wie groß diese Daten sind und wie klein sie sind, wenn Sie den Pfadblock durch URL ersetzen.
Und das ist eine Darstellung einer sehr einfachen Form.
Die einzige Bedingung hier ist, den "sourcePath" des Objekts mit der Methode setSourcePath zu setzen, bevor toDatalessObject / toDatalessJSON aufgerufen wird ("sourcePath" wird intern in "path" kopiert).
Hoffe, dass dies die Dinge ein wenig aufklärt.
Tags und Links javascript canvas json fabricjs