RaphaelJs _ rotation

**Archimède** · 08/02/2021, 16h48

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 : 319
Taille : 195,9 Ko

Nom : disque.jpg
Affichages : 319
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...

**Archimède** · 08/02/2021, 18h23

Je m'en suis sorti comme ça...
Mais je ne comprends pas bien ici la différence entre r et R...

Code JAVASCRIPT :

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
 
var dtheta=0, oldtheta=0,alpha=0,temp_pos=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+temp_pos;
            alpha=alpha%360;
            disque.transform("r" + (-alpha )+','+ R + "," + R); //inverse du sens trigo
            console.log(alpha);
         }
         else temp_pos=alpha;
      });

**NoSmoking** · 09/02/2021, 09h00

Bonjour,

Mais je ne comprends pas bien ici la différence entre r et R...

à quoi fais tu allusion quand tu parles de r, au paramètre de ta fonction transform ?

Si c'est le cas il s'agit d'indiquer une rotation et le R la position du centre ce cette rotation.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

disque.transform("r" + (-alpha )+','+ posXAxe + "," + posYAxe);

Pourquoi n'es tu pas passé par Element.drag qui semble bien correspondre à ton besoin ?

**Archimède** · 09/02/2021, 10h37

Merci pour ta réponse,
en effet, je parlais de transformations absolue et relative pour la rotation... "R" : absolue et "r": relative... rien à voir avec le R du rayon du cercle dont je me sers pour les coords du centre de la rotation.
Je pensais que "r" tenait compte de la position de la rotation précédente alors qu'en absolu, on repartait de la position initiale... C'est pour ça que dans ma dernière proposition, c'est plutôt un "R" qui aurait été préconisé...
La doc est en anglais et ce n'est pas toujours simple de s'approprier les méthodes...
J'ai l'impression que les transformations absolue et relative sont utiles en cumulant plusieurs transformations (translation-rotation... en même temps) et là , le comportement est différent.
Sinon, je regarde element.drag qui serait sans doute plus adapté à ma requête puisque je manque de fluidité sur le déplacement de mon disque gradué qui m'est pas de la même dimension et qui est beaucoup plus chargé que le simple repère que j'ai affiché...

**Archimède** · 09/02/2021, 11h43

Re,

je ne vois pas bien comment l'utiliser

element.drag

puisque cette méthode attend un déplacement de l'objet (drag&drop) en x et y et pas une rotation... Si je n'ai pas x, y, dx et dy sur les fonctions start() et move(), rien ne se produira...

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
 
<!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 Ra=200;
      
      var paper = Raphael("disque",2*Ra,2*Ra);
      
      var disque = paper.set();
      disque.push(paper.circle(Ra,Ra,Ra).attr('fill','red') );
      disque.push(paper.path("M{0} {1} L{2} {3}",0,Ra,2*Ra,Ra).attr({
           stroke: "black",
           "stroke-width": 2
      }) );
      disque.push(paper.path("M{0} {1} L{2} {3}",Ra,0,Ra,2*Ra).attr({
           stroke: "black",
           "stroke-width": 2  
      }) );
      disque.attr({  cursor:'pointer'});
      
      var theta_start=0, theta_move=0,  theta_old=0, theta_end=0;
      
      
      disque.drag(onMove, onStart, onEnd);
      
      function onStart(e){
        theta_start=Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*180/Math.PI; 
      }
      
      function onMove(e){
          theta_move=Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*180/Math.PI;
          theta_end=theta_move-theta_start+theta_old;
          disque.transform("R" + (-theta_end )+','+ Ra + "," + Ra);
      }
      
       function onEnd(){
         theta_old=theta_end;
      }
      
  </script>
</body>
</html>

**NoSmoking** · 09/02/2021, 14h16

Tu n'utilises pas les bonnes signatures pour tes fonctions

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
element.drag((dx, dy, e) => {
  console.log("move", dx, dy, e)
}, (posx, posy) => {
  console.log("start", posx, posy)
}, (ev) => {
  console.log("end", ev)
})

en d'autres termes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function onStart(dx, dy) {
}
 
function onMove(posx, posy) {
}
 
function onEnd(ev) {
}

RaphaelJs _ rotation

JavaScript

Vue hybride

Discussions similaires

Partager

Partager