CanvasRenderingContext2D: setTransform()-Methode

setTransform(a, b, c, d, e, f)
setTransform(matrix)

Die Transformationsmatrix wird beschrieben durch: $\left[ \begin{array}{ccc} a & c & e \ b & d & f \ 0 & 0 & 1 \end{array} \right]$.

Diese Transformationsmatrix wird links mit einem Spaltenvektor multipliziert, der jeden auf der Leinwand gezeichneten Punkt repräsentiert, um die endgültigen Koordinaten auf der Leinwand zu erhalten.

setTransform() akzeptiert zwei Arten von Parametern. Der ältere Typ besteht aus mehreren Parametern, die die einzelnen Komponenten der Transformationsmatrix darstellen:

a (m11)

Die Zelle in der ersten Zeile und ersten Spalte der Matrix.

b (m12)

Die Zelle in der zweiten Zeile und ersten Spalte der Matrix.

c (m21)

Die Zelle in der ersten Zeile und zweiten Spalte der Matrix.

d (m22)

Die Zelle in der zweiten Zeile und zweiten Spalte der Matrix.

e (m41)

Die Zelle in der ersten Zeile und dritten Spalte der Matrix.

f (m42)

Die Zelle in der zweiten Zeile und dritten Spalte der Matrix.

Alternativ können Sie einen einzelnen Parameter übergeben, der ein Objekt ist, das die oben genannten Werte als Eigenschaften enthält. Die Parameternamen sind die Schlüssel der Eigenschaften, und falls zwei synonyme Namen gleichzeitig vorhanden sind (z. B. m11 und a), müssen sie denselben Zahlenwert haben, sonst wird ein TypeError ausgelöst. Die Verwendung der Objektform erlaubt das Weglassen einiger Parameter — a und d sind standardmäßig 1, während der Rest auf 0 gesetzt ist.

Wenn ein Punkt ursprünglich die Koordinaten $(x, y)$ hat, wird er nach der Transformation die Koordinaten $(ax + cy + e, bx + dy + f)$ haben. Das bedeutet:

• e und f steuern die horizontale und vertikale Verschiebung des Kontexts.
• Wenn b und c 0 sind, steuern a und d die horizontale und vertikale Skalierung des Kontexts.
• Wenn a und d 1 sind, steuern b und c das horizontale und vertikale Verzerren des Kontexts.

Keiner (undefined).

Dieses Beispiel verzerrt ein Rechteck sowohl vertikal (.2) als auch horizontal (.8). Skalierung und Verschiebung bleiben unverändert.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx.fillRect(0, 0, 100, 100);

Ergebnis

Im folgenden Beispiel haben wir zwei <canvas>-Elemente. Wir wenden eine Transformation auf den Kontext des ersten an, indem wir den ersten Typ von setTransform() verwenden und ein Quadrat darauf zeichnen. Dann rufen wir die Matrix mit CanvasRenderingContext2D.getTransform() von diesem ab.

Wir wenden dann die abgerufene Matrix direkt auf den Kontext der zweiten Leinwand an, indem wir das DOMMatrix-Objekt direkt an setTransform() übergeben (d. h. den zweiten Typ) und zeichnen einen Kreis darauf.

HTML

<!-- First canvas (ctx1) -->
<canvas width="240"></canvas>
<!-- Second canvas (ctx2) -->
<canvas width="240"></canvas>

CSS

canvas {
  border: 1px solid black;
}

JavaScript

const canvases = document.querySelectorAll("canvas");
const ctx1 = canvases[0].getContext("2d");
const ctx2 = canvases[1].getContext("2d");

ctx1.setTransform(1, 0.2, 0.8, 1, 0, 0);
ctx1.fillRect(25, 25, 50, 50);

let storedTransform = ctx1.getTransform();
console.log(storedTransform);

ctx2.setTransform(storedTransform);
ctx2.beginPath();
ctx2.arc(50, 50, 50, 0, 2 * Math.PI);
ctx2.fill();

Ergebnis

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.transform()