p5.js comment traduire le long des axes après rotation

Question

Après avoir fait pivoter un système de coordonnées, il effectue une translation le long de ses nouveaux axes. Est-il en quelque sorte possible de le traduire le long des axes avant la rotation?

L'idée est que l'utilisateur télécharge une image, puis il peut la faire pivoter, l'agrandir et la déplacer vers le milieu de la fenêtre. D'une manière ou d'une autre, je ne parviens pas à réaliser toutes ces fonctions une fois.

Des suggestions?

EDIT

I.e. il y a une toile. Je dessine une image là-bas. Puis je le fais pivoter à 90 ° et je veux le traduire sur l'axe X. Il se déplace vers le bas de l'écran. Parce que les axes sont retournés.

EDIT

Voici un extrait de code que j'utilise pour la transformation. L'image est toujours tournée dans son point (0,0). C'est pourquoi je le traduis de manière rotative à son point médian. Ensuite, je dessine l'image dans un point décalé.

p.push(); 
     p.translate(canvasWidth/2, canvasHeight/2); 
     p.rotate(angle * p.TWO_PI/360); 

     var x = -loadedImage.width/2 - offsetX; 
     var y = -loadedImage.height/2 - offsetY; 

     p.image(loadedImage, x, y); 
    p.pop(); 

EDIT

Je decied à traduire d'abord, puis faites pivoter. Cela rend la traduction correcte mais tourne autour du mauvais point de pivotement. Je ne peux pas tout avoir je suppose.

Answer 1

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.save(); 
ctx.fillStyle="red"; 
ctx.translate(100,0); 
ctx.rotate(20 * Math.PI/180); 
ctx.fillRect(0, 0, 100, 50); 
ctx.restore(); 
ctx.fillRect(100,0,50,50); 

essayez ce code: Utiliser drawImage au lieu de fillRect dans votre code