Gezeichnete Form in HTML-Canvas positionieren

Question

Ich habe eine komplexe Form, die aus einer SVG-Datei generiert wurde, in die wir Bilder im Canvas schneiden.

Alle Bezierkurvenkoordinaten basieren jedoch auf 0,0. Die Größe unserer Form wird abhängig von der Größe der Leinwand (die basierend auf der Bildschirmbreite des Benutzers skaliert) skaliert.

Gibt es eine Möglichkeit, die bereits gezeichnete Form zu nehmen und sie dann an eine bestimmte Position auf der Leinwand zu verschieben? Ähnlich wie ctx.scale (#, #) skaliert die gezeichnete Form?

Danke!

Answer 1

Verwenden Sie ctx.translate(), um die Position von Elementen auf der Arbeitsfläche zu ändern.

See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating

Mit übersetzen wird die Position der alles ändern, die anschließend auf die Leinwand gezogen wird. Wenn Sie nur eine Sache bewegen möchten, können Sie entweder tun:

ctx.translate(x,y); 
// draw something 
ctx.translate(-x,-y); 

oder Sie tun können:

ctx.save(); 
ctx.translate(x,y); 
// draw something 
ctx.restore();