CanvasRenderingContext2D: Methode setTransform()

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 Canvas gezeichneten Punkt darstellt, um die endgültige auf der Canvas verwendete Koordinate zu erzeugen.

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

a (m11)

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

b (m12)

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

c (m21)

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

d (m22)

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

e (m41)

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

f (m42)

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

Alternativ können Sie einen einzelnen Parameter übergeben, der ein Objekt ist und die oben genannten Werte als Eigenschaften enthält. Die Parameternamen sind die Eigenschaftsschlüssel, und wenn zwei synonyme Namen (z. B. m11 und a) beide vorhanden sind, müssen sie denselben Zahlenwert haben, sonst wird ein TypeError ausgelöst. Bei Verwendung der Objektform können einige Parameter weggelassen werden — a und d haben einen Standardwert von 1, während der Rest einen Standardwert von 0 hat.

Hatte ein Punkt ursprünglich die Koordinaten $(x, y)$, dann hat er nach der Transformation die Koordinaten $(ax + cy + e, bx + dy + f)$. Dies 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 die horizontale und vertikale Verzerrung 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 Elements mittels des ersten Typs von setTransform() an und zeichnen ein Quadrat darauf, dann rufen wir die Matrix davon mit CanvasRenderingContext2D.getTransform() ab.

Dann wenden wir die abgerufene Matrix direkt auf den Kontext des zweiten Canvas-Elements 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()