CSSTransformValue: Methode toMatrix()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die Methode toMatrix() des Interfaces CSSTransformValue gibt ein DOMMatrix-Objekt zurück.
Die zurückgegebene Matrix ist das Produkt der Matrizen jedes CSSTransformComponent in der CSSTransformValue. Sie wird berechnet, indem nacheinander für jede Komponente CSSTransformComponent.toMatrix() aufgerufen und die Ergebnisse in der angegebenen Reihenfolge miteinander multipliziert werden.
Syntax
toMatrix()
Parameter
Keine.
Rückgabewert
Ein DOMMatrix-Objekt.
Ausnahmen
TypeError-
Wird ausgelöst, wenn Längen, die an der Erzeugung der Matrix beteiligt sind, keine mit px kompatiblen Einheiten haben, etwa relative Längen oder Prozentangaben.
Beispiele
Eine Transformation in eine Matrix umwandeln
const transform = new CSSTransformValue([
new CSSTranslate(CSS.px(10), CSS.px(20)),
new CSSScale(2, 3),
]);
const matrix = transform.toMatrix();
console.log(matrix.a, matrix.d); // 2 3
console.log(matrix.e, matrix.f); // 10 20
Inkompatible Einheiten behandeln
toMatrix() löst eine Ausnahme aus, wenn die Länge einer Komponente nicht in Pixel aufgelöst werden kann, beispielsweise bei einer Prozentangabe:
const transform = new CSSTransformValue([
new CSSTranslate(CSS.percent(50), CSS.px(20)),
]);
try {
transform.toMatrix();
} catch (e) {
console.log(e); // TypeError
}
Spezifikationen
| Spezifikation |
|---|
| CSS Typed OM Level 1 # dom-csstransformvalue-tomatrix |