Rotation d'une image dans la zone de dessin et maintien de la forme

Question

J'ai une image que je dessine sur une toile. Lorsque la souris clique et fait glisser, j'obtiens les coordonnées de la souris et je les utilise pour définir la position X et Y de l'image. Après que cela a été fait, je redessine la toile. Cela fonctionne comme un charme et je peux déplacer l'image sur la toile.

Mais maintenant je fais 2 boutons pour que je puisse tourner l'image vers la gauche et vers la droite. Lorsque je fais pivoter l'image, elle se déplace maintenant par rapport à l'angle que j'ai tourné. Donc quand je fais pivoter l'image à 180deg et que je fais glisser l'image vers le haut, elle descend! Je ne sais pas pourquoi cela arrive ou comment je peux le compenser. :(

Eh bien, je comprends que je peux être un peu vague si here is a demo of the problem.

Answer 1

Je ne peux pas accéder à l'URL de démonstration vous avez fourni, mais cela devrait être universel

Vous devez déplacer votre objet à la base de votre espace de coordonnées o:(0,0), faites votre rotation, puis replacez votre objet là où il était avant de le déplacer, et puisque toutes vos transformations sont jointes dans une seule matrice de transformation, l'ordre des transformations est très important, et vous avez juste besoin de les faire inversement, à savoir déplacer votre objet à sa position initiale, puis faites-le pivoter, puis déplacez-le à la base de l'espace de coordonnées:

ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 

et le tour est joué. est ici la démo: http://jsfiddle.net/ArtBIT/CdbWx/1

Answer 2

essayer d'échanger ces deux lignes

 
oContext.translate(oImage.size.x /2 ,oImage.size.y/2); 
oContext.rotate(oImage.rotate * Math.PI/180); 

Faire tourner d'abord, puis traduit.

Answer 3

similaires à la réponse de ArtBIT, mais en prenant en considération que vous vouloir tourner du centre, j'utiliser le code:

ctx.translate(width/2, height/2); 
ctx.translate(objects_x_position, objects_y_position); 
ctx.rotate(angle); 
ctx.translate(-objects_x_position, -objects_y_position); 
ctx.translate((width/-2), height/-2);