Html 5 toile tournant une règle dans la direction de l'origine

Question

Quelqu'un peut-il me dire comment faire pivoter la règle (échelle), dans la toile? Dans les deux sens (dans le sens des aiguilles d'une montre et dans le sens anti-horaire), je suis capable de faire tourner la règle dans le sens des aiguilles d'une montre mais pas dans le sens contraire des aiguilles d'une montre. Le problème vient Si je décale l'origine à la règle (à gauche, en haut). Est-ce que quelqu'un a la solution?

Answer 1

Pour faire pivoter la règle CCW à partir d'une position horizontale, vous devez déplacer la souris au-dessus ou à gauche du centre de la rotation; parce que le centre est dans le coin supérieur gauche, cela signifie que vous devez déplacer votre souris hors de la règle. Le problème est que le gestionnaire mousemove qui fait tourner la règle ne fonctionne que lorsque la souris est sur la règle. Vous pouvez résoudre ce problème en attachant ce même gestionnaire au conteneur parent.

j'ai obtenu votre code pour en remplaçant la ligne

$('#id_scale').bind("mousemove",function(e){ 

avec

$('#parent_container').bind("mousemove",function(e){ 

jsFiddle example (rotation ne fonctionne que dans Firefox, tout comme l'original)

Vous pouvez envisager d'ajouter d'autres styles de transformation pour que votre code fonctionne dans les navigateurs autres que Firefox.