Toile Objet tournant sur les points dynamiques

Question

J'ai un rectangle arrondi à un x, y, w, h spécifique sur une toile. Je fais d'abord un contexte.translate pour obtenir l'objet où je le veux, puis quand il s'agit de le faire tourner, c'est là que j'ai des problèmes pour faire les calculs nécessaires.

Je peux faire un simple context.rotate (Math.PI/180 * 25) pour le faire pivoter de 25degs mais il tourne depuis le x, y. Je veux vraiment déplacer le point de rotation à x + (w/2) et y + (w/2).

Je ne sais pas comment indiquer à la méthode de rotation de la faire pivoter autour d'un point différent. Je pense que je dois le faire tourner comme d'habitude mais recalculer x, y peut-être basé sur la rotation peut-être?

Answer 1

La toile est toujours et tourne autour de l'origine (0,0). La commande ctx.translate peut être considérée comme décalant l'origine, vous devez donc la traduire par (x+w/2, y+h/2) avant de la faire pivoter si vous souhaitez effectuer une rotation autour du centre du rectangle.

(et bien sûr, retraduire après, ou save et restore)