Darstellungen verschieben

April 2023

Ein Beispiel

Man möchte eine Figur zeichnen (z.B. einen Baum) und dann an anderer Stelle platzieren. Das ist sinnvoll, wenn man dieselbe Figur gern an mehreren Stellen hätte (z.B. als ein Wald).
Gute Idee, funktioniert aber so nicht in der Canvas. Wenn eine Figur gezeichnet wurde, dann steht sie unveränderlich auf ihrem Platz. Und wenn danach ein neuer Pfad beginnt, dann sind alle Hoffnungen auf nachträgliches Verschieben der Figur endgültig zerstört.
Daher hat man sich für die Canvas was ganz anderes einfallen lassen: Man organisiert zuerst die Verschiebung und zeichnet danach. Wie das geht, zeigt dieser Beitrag.
Wie immer fangen wir mit einem übersichtlichen Beispiel an und zeichnen einen Kreis. 
Ctx2d.strokeStyle = '#00cc00';
Ctx2d.lineWidth = 3;
Ctx2d.arc(50, 50, 36, 0, 2 * Math.PI, false);
Ctx2d.stroke();
Hinter der Canvas verbirgt sich unsichtbar das Koordinatensystem. Dieses Koordinatensystem kann man verschieben, dazu gibt es die Methode translate().
Mit translate(100,20) verschieben wir das Koordinatensystem um 100 Pixel in x-Richtung (nach rechts) und 20 Pixel in y-Richtung (nach unten). 
Ctx2d.strokeStyle = '#00cc00';
Ctx2d.lineWidth = 3;
// Koordinatensystem verschieben
Ctx2d.translate(100, 20);
Ctx2d.arc(50, 50, 36, 0, 2 * Math.PI, false);
Ctx2d.stroke();
 // Koordinatensystem zurücksetzen
Ctx2d.setTransform(1, 0, 0, 1, 0, 0);
Der Kreis wird gezeichnet, optisch aber um die gewünschten Beträge verschoben.
Jede Figur, die wir danach zeichnen würden, würde genauso verschoben werden. Wollen wir normal weiterzeichnen, sollten wir das Koordinatensystem wieder zurücksetzen. Das geht mit der Methode setTransform(1,0,0,1,0,0) und genau mit diesen Werten.
Das zeigen wir, wenn wir den Kreis mit denselben Koordinaten nochmal zeichnen (neuer Pfad), er taucht ohne Verschiebung an erwarteter Stelle auf. 
Ctx2d.strokeStyle = '#00cc00'; 
Ctx2d.lineWidth = 3;
Ctx2d.translate(100, 20);
Ctx2d.arc(50, 50, 36, 0, 2 * Math.PI, false);
Ctx2d.stroke();
Ctx2d.setTransform(1, 0, 0, 1, 0, 0);

Ctx2d.beginPath();
Ctx2d.arc(50, 50, 36, 0, 2 * Math.PI, false);
Ctx2d.stroke();
Das Beispiel zur Verschiebung kann hier angeschaut werden.