Salut,

je tente de refaire une animation que j'avais faite en as3 à l'aide de raphaelJS.
Le but pour l'instant et modestement est de faire tourner un disque rapporteur à l'aide de la souris...
J'ai codé le disque à l'aide Raphaeljs dont voici une capture :
Nom : disque.jpg Affichages : 318 Taille : 195,9 Ko

Pour simplifier mon problème, j'ai un souci de transfo relative dans ma rotation... En reprenant un déplacement, la position précédente n'est pas prise en compte. Si quelqu'un a une idée et surtout des connaissances plus élaborées sur la bibliothèque qui pourraient m'aider...

voici mon problème :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<!DOCTYPE html>
<html>
<head>
    <title>Essai_angle</title>
      <script type="text/javascript" src="path/to/raphael.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
</head>
<body>
  <div id="disque"></div>
 
<script>
      var disque=document.getElementById('disque');
      var R=200;
      
      var paper = Raphael("disque",2*R,2*R);
      
      var disque = paper.set();
      disque.push(paper.circle(R,R,R).attr('fill','red') );
      disque.push(paper.path("M{0} {1} L{2} {3}",0,R,2*R,R).attr({
           stroke: "black",
           "stroke-width": 2
      }) );
      disque.push(paper.path("M{0} {1} L{2} {3}",R,0,R,2*R).attr({
           stroke: "black",
           "stroke-width": 2  
      }) );
      disque.attr({  cursor:'pointer'});
      
      
      var bouger=false;
      var dtheta=0, oldtheta=0,alpha=0;
      
      
      disque.mousedown(function(e){
         oldtheta=Math.atan2(R-e.offsetY,e.offsetX-R)*180/Math.PI;  //coords maths
         bouger=true;
      });
      
      disque.mousemove(function(e){
         if (bouger){
            dtheta=Math.atan2(R-e.offsetY,e.offsetX-R)*180/Math.PI;
            alpha=dtheta-oldtheta;
            alpha=alpha%360;
            disque.transform("r" + -alpha +','+ R + "," + R); //inverse du sens trigo
            console.log(alpha);
         }
      });
      
      disque.mouseup(function(){
         bouger=false;
      });
  </script>
</body>
</html>

Ps: après le mouseup doit être sur le container et on pourrait sans doute se passer du booléen avec un unmousemove...