DOMMatrixReadOnly: Methode toJSON()
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Die Methode toJSON() der Schnittstelle DOMMatrixReadOnly gibt ein JSON-serialisierbares einfaches Objekt zurück, das das DOMMatrixReadOnly-Objekt repräsentiert.
Die Methode wird von JSON.stringify() automatisch aufgerufen, wenn bei der JSON-Serialisierung ein DOMMatrixReadOnly-Objekt vorkommt. Der serialisierte Wert kann anschließend innerhalb der Reviver-Funktion von JSON.parse() mit der Funktion DOMMatrixReadOnly.fromMatrix() deserialisiert werden.
Syntax
toJSON()
Parameter
Keine.
Rückgabewert
Ein JSON-serialisierbares einfaches Objekt mit den folgenden Eigenschaften:
abcdefm11m12m13m14m21m22m23m24m31m32m33m34m41m42m43m44is2DisIdentity
Der Wert jeder Eigenschaft wird unverändert kopiert.
Beispiele
toJSON() direkt aufrufen
Dieses Beispiel erstellt zwei DOMMatrixReadOnly-Objekte: eine 2D-Matrix und eine 3D-Matrix. Ein direkter Aufruf von toJSON() gibt ein einfaches Objekt zurück. Dessen Eigenschaften haben dieselben Werte wie die entsprechenden Eigenschaften des ursprünglichen Objekts.
const matrix = new DOMMatrixReadOnly("translate(20px, 30px)");
const matrix3D = new DOMMatrixReadOnly("translate3d(22px, 55px, 66px)");
const json = matrix.toJSON();
console.log(json); // A plain object
console.log(typeof json); // "object"
console.log(json.is2D); // Same value as matrix.is2D
In einen JSON-String serialisieren
Das DOMMatrixReadOnly-Objekt aus dem vorherigen Beispiel wird mit JSON.stringify() serialisiert. Dabei wird die Methode toJSON() automatisch aufgerufen.
console.log(JSON.stringify(matrix));
Dies würde einen JSON-String wie den folgenden ausgeben (zur besseren Lesbarkeit formatiert):
{
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"e": 20,
"f": 30,
"m11": 1,
"m12": 0,
"m13": 0,
"m14": 0,
"m21": 0,
"m22": 1,
"m23": 0,
"m24": 0,
"m31": 0,
"m32": 0,
"m33": 1,
"m34": 0,
"m41": 20,
"m42": 30,
"m43": 0,
"m44": 1,
"is2D": true,
"isIdentity": false
}
Das matrix3D-Objekt ist dreidimensional, daher hat is2D den Wert false:
console.log(JSON.stringify(matrix3D));
Dies würde einen JSON-String wie den folgenden ausgeben (zur besseren Lesbarkeit formatiert):
{
"a": 1,
"b": 0,
"c": 0,
"d": 1,
"e": 22,
"f": 55,
"m11": 1,
"m12": 0,
"m13": 0,
"m14": 0,
"m21": 0,
"m22": 1,
"m23": 0,
"m24": 0,
"m31": 0,
"m32": 0,
"m33": 1,
"m34": 0,
"m41": 22,
"m42": 55,
"m43": 66,
"m44": 1,
"is2D": false,
"isIdentity": false
}
Spezifikationen
| Spezifikation |
|---|
| Geometry Interfaces Module Level 1 # dom-dommatrixreadonly-tojson |