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

Nom : disque.jpg
Affichages : 274
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) {
}

**Archimède** · 09/02/2021, 14h45

Salut, mon objet est un groupe paper.set() appelé: disque dont je veux faire une rotation autour de son centre... Donc un déplacement de celui-ci en x ou y ne présente aucun intérêt pour moi...C'est ce que je voulais dire. Drag() ne me sert à rien ici...

**Archimède** · 10/02/2021, 14h25

J'ai laissé tomber l'utilisation de Raphaeljs... La rotation de mon disque manque largement de fluidité et il n'y a pas suffisamment de documentation francophone sur les méthodes de cette bibliothèque. Donc plutôt que de ramer, j'ai repris le code avec un bon vieux canvas.context qui me donne une rotation d'une grande fluidité ( context.rotate() ). Le seul inconvénient étant de ne pas travailler en vectoriel et d'avoir à ajouter un antialiasing ...mais le crénelage n'est pas très perceptible et le résultat est plutôt bon.
Après, je laisse la discussion ouverte si une personne a des compétences sur cette bibliothèque.

**NoSmoking** · 11/02/2021, 18h50

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

J'ai regardé un peu le code source et que lorsque l'on écrive element.transform("r45", ...) ou element.transform("R45", ...) ne change rien ce déplacement est réalisé en absolu.
Pour un déplacement en relatif il faut écrire element.transform("...r45", ...), c'est les trois points qui font la différence.
Voir commentaire dans raphael.svg.js, voir ligne 826

Drag() ne me sert à rien ici...

Effectivement de ce que j'ai vu cela n'est pas forcément la bonne solution, il y a, entre autres, des soucis concernant la gestion des survols ...
La gestion via les mousedown-move-up me paraît une bonne chose.

Juste une petite chose, il est préférable d'affecter l'événement mousemove lors du mousedown et de le supprimer lors du mouseup pour éviter les appels à mousemove non concernés.

Un schéma de ce type :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function handleMouseDown(event) {
  console.log(event.type);
  disque.mousemove(handleMouseMove);
}
 
function handleMouseMove(event) {
  console.log(event.type);
}
function handleMouseUp(event) {
  console.log(event.type);
  disque.unmousemove(handleMouseMove);
}
 
disque.mousedown(handleMouseDown);
disque.mousemup(handleMouseUp)

il n'y a pas suffisamment de documentation francophone sur les méthodes de cette bibliothèque.

difficile effectivement de trouver simplement des exemples clairs pour une prise en main et la documentation officielle n'est pas très limpide.

J'ai laissé tomber l'utilisation de Raphaeljs...

La construction des objets SVG m'est apparu assez simple et il existe d'autre bibliothèques du même style mais attention à bien définir le besoin.

**Archimède** · 11/02/2021, 19h56

Super !, merci pour ta réponse...

uste une petite chose, il est préférable d'affecter l'événement mousemove lors du mousedown et de le supprimer lors du mouseup pour éviter les appels à mousemove non concernés.

En effet, c'est une remarque très pertinente

Je reprendrai ce que j'avais commencé à faire en tenant compte de ton code dans la gestion des événements souris.... Il est possible que ça vienne de là pour la lenteur de la réponse au déplacement.
Actuellement, je termine mon animation avec canvas.context qui gère très bien le problème...

Merci encore à toi pour l'aide apportée, c'est sympa d'avoir regardé la doc...

**NoSmoking** · 13/02/2021, 10h06

La rotation de mon disque manque largement de fluidité

Je n'ai pas franchement constaté cela.

Ayant donc regardé un peu cette bibliothèque, j'ai fait quelques expérimentations, noté des trucs singuliers et finalement réalisé un exemple simple sur base de ce que tu as fait.

Le code résultat :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raphaël : Element.transform([tstr])</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2102584">
<meta name="description" content="Raphaël JS : Rotation d'un disque au déplacement (drag) de la souris.">
<style>
html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
h1, h2, h3 {margin: .25em 0;color: #069;}
time {float: right;margin: .5em;font-size: 0.9em;color: #888;}
main {display: block;margin: auto;max-width: 60em;}
section {position: relative;margin: 0 2em 1em;}
code {font-family: Courier New;}
ul {
  margin: 0;
  list-style: none;
}
li > label {
  display: inline-block;
  margin-right: .5em;
  min-width: 5em;
  color: #069;
}
li > label:after {
  content: ": ";
  float: right;
}
#disque {
}
#disque svg {
  display: block;
  margin: 1em auto;
}
</style>
</head>
<body>
<main>
  <header>
    <time datetime="2021-02-13">Fév. 2021</time>
    <h1>Raphaël JS : <code>Element.transform([tstr])</code></h1>
    <p>Rotation d'un disque au déplacement (drag) de la souris.
  </header>
  <section>
    <h2>Zone de jeu</h2>
    <div id="disque"></div>
  </section>
  <section>
    <h2>Debug</h2>
    <ul>
      <li><label>Start</label><span id="info-debut"></span>
      <li><label>Move</label><span id="info-move"></span>
      <li><label>Mouse</label><span id="info-mouse"></span>
    </ul>
  </section>
  <footer>
    <p>Voir la <a href="https://www.developpez.net/forums/showthread.php?t=2102584">discussion sur Developpez.com</a>
  </footer>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script>
"use strict";
// pour debug
const oInfos = document.querySelectorAll("[id^='info']");
 
// création du SVG
const RAYON = 200;
const paper = Raphael("disque", 2 * RAYON, 2 * RAYON);
const disque = paper.set();
 
disque.push(paper.circle(RAYON, RAYON, RAYON)
  .attr({
    "stroke": "#069",
    "fill": "#EEE"
  }));
disque.push(paper.path("M{0} {1} L{2} {3}", 0, RAYON, 2 * RAYON, RAYON)
  .attr({
    "stroke": "#080",
    "stroke-width": 1
  }));
disque.push(paper.path("M{0} {1} L{2} {3}", RAYON, 0, RAYON, 2 * RAYON)
  .attr({
    "stroke": "#F00",
    "stroke-width": 1
  }));
disque.push(paper.circle(RAYON * 2 -10 , RAYON, 5)
  .attr({
    "stroke": "#000",
    "fill": "#FFF"
  }));
disque.attr({
  "cursor": "grab"
});
 
//**
const App = {
  deltaAlpha: 0,
  /**
   * Raphael.angle simplifiée
   */
  getAngle: function(x, y) {
    x = x - RAYON;
    y = y - RAYON;
    return (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
  },
  /**
   * récup. position mouse par rapport à un élément conteneur
   */
  getMousePos: function(element, event) {
    const rect = element.getBoundingClientRect();
    return {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top
    };
  },
  /**
   * récup. angle via Matrix.split
   * Matrix.split renvoie un angle entre [-90 -270]
   * normalise l'angle entre [0 - 360]
   */
  getAlphaStart: function(elem) {
    const firstElement = elem.getSubpath()[0];
    let alpha = firstElement.matrix.split().rotate;
    if (alpha < 0) {
      alpha = 360 + alpha;
    }
    return alpha;
  }
};
/**
 *
 */
 function handleMouseMove(event) {
  const oSVG = disque.paper.canvas;
  const mouse = App.getMousePos(oSVG, event);
  const angle = App.getAngle(mouse.x, mouse.y) - App.deltaAlpha;
  // déplacement
  disque.transform("r" + (angle) + " ," + RAYON + "," + RAYON);
  // affiche infos
  oInfos[1].textContent = angle.toFixed(4);
  oInfos[2].textContent = "x : " + mouse.x + " | y : " + mouse.y;
}
function handleMouseUp(event) {
  event.stopPropagation();
  // restaure aspect curseur
  disque.attr({"cursor" : "grab"});
  // désaffecte les handles Mouse
  disque.unmousemove(handleMouseMove);
  disque.unmouseup(handleMouseUp);
}
function handleMouseDown(event) {
  // on peut toujours avoir des surprises
  event.stopPropagation();
  event.preventDefault();
  // aspect curseur cela ne mange pas de pain
  disque.attr({"cursor" : "grabbing"});
  // get init
  const oSVG = disque.paper.canvas;
  const mouse = App.getMousePos(oSVG, event);
  const angleStart = App.getAlphaStart(disque);
  const angleClic = App.getAngle(mouse.x, mouse.y);
  // ecart d'angle
  App.deltaAlpha = angleClic - angleStart;
  // affecte les handles Mouse
  disque.mousemove(handleMouseMove);
  disque.mouseup(handleMouseUp);
  // affiche infos
  oInfos[0].textContent = angleStart.toFixed(4) + " | " + App.deltaAlpha.toFixed(4) + " | x : " + mouse.x + " | y : " + mouse.y;
}
//**
disque.mousedown(handleMouseDown);
document.addEventListener("mouseup", handleMouseUp);
</script>
</body>
</html>

Le fichier exemple en ligne :

Raphaël JS : Element.transform([tstr])

**Archimède** · 13/02/2021, 18h19

Je vois que tu t'ai fait plaisir

En fait, avec un simple repère dans un cercle, ça fonctionnait plutôt bien mais avec un disque rapporteur (voir image) plus chargé en code qui occupe toute la surface client du navigateur, c'était une autre histoire... Mais je n'ai pas eu le temps de tester avec la modif sur la gestion des événements souris...Je regarde ça prochainement. Merci pour ta démo qui devrait régler mon problème.
Sympa le coup du curseur. Je retiens tout ça...
Un petit tuto sur RaphaelJS serait le bienvenu (ainsi qu'un sous forum) pour tous les anciens utilisateurs d'actionscript comme moi qui restent sur leur faim. D'ailleurs, je constate actuellement qu'il y a moins d'animations pédagogiques produites depuis l'abandon de flash. Beaucoup utilisent encore le flashplayer.exe pour lire en local leurs anciennes animations... Cette bibliothèque reste la plus proche de flash dans le concept et mérite d'être valorisée.

**Archimède** · 15/02/2021, 12h39

Re, j'ai terminé mon animation avec canvas/context et je reviens sur RaphaelJs...
Pour l'instant, (ce n'était qu'une ébauche), j'ai uniquement revu la gestion des événements souris en supprimant mon booléen et en ajoutant les unmouse comme tu me le proposes... Je n'ai pas approfondi la gestion de l'angle... ( alpha = firstElement.matrix.split().rotate ... )
J'avais fait tout en relatif pour avoir un resize derrière vu que l'on est en vectoriel (autant en profiter...)

Je n'ai toujours pas de gain de fluidité avec la modif :

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="disque_container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script>
 
const pi=Math.PI;
const deg= 180/pi;
const rad=pi/180;
var w,h,wc,hc,Ra;
var disque_container=document.getElementById('disque_container');
var paper,disque;
 
function drawdisque(){
      w=window.innerWidth;
      h=window.innerHeight;
      wc=h/1.02;
      hc=h/1.02;
      Ra=hc/2;
      
      disque_container.style.position="absolute";
      disque_container.style.left=w/3+"px";
      disque_container.style.top=(h-h/1.02)/2+"px";
      
      paper = Raphael("disque_container", wc, hc);
      disque = paper.set();
      
      disque.push(paper.circle(wc/2, hc/2, Ra).attr({
         fill:'#fffaf0',
         stroke: "#fffaf0",
         "stroke-width": 1   
      }) );
      disque.push(paper.path("M{0} {1} L{2} {3}",0,Ra,2*Ra,Ra).attr({
           stroke: "black",
           "stroke-width": 1
      }) );
      disque.push(paper.path("M{0} {1} L{2} {3}",Ra,0,Ra,2*Ra).attr({
           stroke: "black",
           "stroke-width": 1  
      }) );
      disque.push(paper.circle(wc/2, hc/2, Ra/1.5).attr({
           stroke: "black",
           "stroke-width": 1  
      }) );
      disque.push(paper.circle(wc/2, hc/2, Ra/4).attr({
           stroke: "black",
           "stroke-width": 1  
      }) );
      disque.push(paper.circle(wc/2, hc/2, Ra/10).attr({
           stroke: "black",
           "stroke-width": 1  
      }) );
      disque.push(paper.circle(wc/2, hc/2, Ra/70).attr({
           stroke: "black",
           "stroke-width": 1,
           fill:'#fffaf0' 
      }) );
      
      for (let i=0; i<360; i++){
         let teta=rad*i; 
         let grad=paper.path("M{0} {1} L{2} {3}",Ra*(1+9.7*Math.cos(teta)/10),Ra*(1+9.7*Math.sin(teta)/10),Ra*(1+Math.cos(teta)),Ra*(1+Math.sin(teta))).attr({
             stroke: "black",
             "stroke-width": 2   
          });
         disque.push(grad);
      }
      
      for (let j=0; j<36; j++){
          let teta2=pi*j/18; 
          let grad2=paper.path("M{0} {1} L{2} {3}",Ra*(1+9.1*Math.cos(teta2)/10),Ra*(1+9.1*Math.sin(teta2)/10),Ra*(1+Math.cos(teta2)),Ra*(1+Math.sin(teta2))).attr({
             stroke: "black",
             "stroke-width": 2   
          });
         disque.push(grad2);
      
         let angle='';
         if (j<=9) {angle=String(10*j);}
         else if ( (j>9) && (j<=18) ) {angle=String(90-(j-9)*10);}
         else if ( (j>18) && (j<=27) ) {angle=String((j-9)*10-90);}
         else {angle=String(170- (j-19)*10);}
         let text=paper.text( Ra*(1+7/8*Math.cos(teta2) ) ,Ra*(1+7/8*Math.sin(teta2) ) , angle ).attr({
            "font-family":"Tahoma",
            "font-size":14,
            "font-weight": "bold",
            fill:'#555555'
         });
         disque.push(text);
      }
      
      for (let k=0; k<72; k++){
         let teta3=5*rad*k; 
         let grad3=paper.path("M{0} {1} L{2} {3}",Ra*(1+9.4*Math.cos(teta3)/10),Ra*(1+9.4*Math.sin(teta3)/10),Ra*(1+Math.cos(teta3)),Ra*(1+Math.sin(teta3))).attr({
             stroke: "black",
             "stroke-width": 2   
          });
         disque.push(grad3);
      }
      
      disque.attr({"cursor" : "grab"});
}
 
drawdisque();
      
 
var theta_start=0, theta_move=0, theta_end=0, theta_old=0;
 
function handleMouseMove(e){
         theta_move = Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*deg;
         theta_end = theta_move-theta_start+theta_old;
         disque.transform("r" + (-theta_end )+','+ Ra + "," + Ra); 
}
 
    
function handleMouseUp(e){
  e.stopPropagation();
  disque.attr({"cursor" : "grab"});
  theta_old=theta_end;
  disque.unmousemove(handleMouseMove);
  disque.unmouseup(handleMouseUp);
}
 
function handleMouseDown(e){
   e.stopPropagation();
   e.preventDefault();
   disque.attr({"cursor" : "grabbing"});
   theta_start=Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*deg; 
   disque.mousemove(handleMouseMove);
   disque.mouseup(handleMouseUp);
}
 
function handleResize(){
   drawdisque();
   //A voir pour la gestion de la rotation...handleMouseMove
}
 
disque.mousedown(handleMouseDown);
window.addEventListener("mouseup", handleMouseUp);
window.addEventListener('resize',handleResize);
</script>
 
</body>
</html>

**NoSmoking** · 15/02/2021, 14h31

En fait, avec un simple repère dans un cercle, ça fonctionnait plutôt bien mais avec un disque rapporteur ...

Je me suis fait la réflexion justement et donc poussé plus loin mes « investigations ».

Constats :
Un Paper.set n'est pas un élément du DOM. Chaque transform sur l'élément Paper.set est appliqué à tous les éléments du Paper.set. On ne peut donc pas affecter une transformation aux éléments contenus dans celui-ci, cette transformation sera écrasée à la première transformation appliquée au Paper.set.

Raphaël ne supporte malheureusement pas les éléments DOM <g>, certaines animations peuvent être lentes et/ou délicates à résoudre.

Pour s'en sortir il faut trouver le plugin ajoutant les groupes à l'objet Raphaël, j'en ai trouvé au moins deux :

le plugin de 2hats.net, minimaliste, il suffit de regarder le code source de la page pour le voir ;
le plugin de george-i, pas testé le précédent faisant le job ;
il y a également une bibliothèque sur base de Raphaël, RedRaphaël, je ne l'ai pas encore regardé.

Après test, la vitesse d’exécution est de l'ordre de 4 à 5 fois plus rapide lorsque l'on utilise des éléments <g> plutôt que de travailler sur avec des Paper.set.

Tu peux regarder l'exemple que j'ai mis en ligne :

Raphaël JS width <g>, copie la source et modifier la const GROUP pour voir la différence.

Un petit tuto sur RaphaelJS serait le bienvenu (ainsi qu'un sous forum)

Lorsque l'on regarde la dernière mise à jour pas sûr que Raphaël soit un bon choix même si il reste léger.

J'avais fait tout en relatif pour avoir un resize derrière vu que l'on est en vectoriel (autant en profiter...)

Je pense qu'il est suffisant de travailler avec les height, width du <svg> associés au viewbox.

**Archimède** · 15/02/2021, 15h30

Merci, super

Un Paper.set n'est pas un élément du DOM. Chaque transform sur l'élément Paper.set est appliqué à tous les éléments du Paper.set. On ne peut donc pas affecter une transformation aux éléments contenus dans celui-ci, cette transformation sera écrasée à la première transformation appliquée au Paper.set.

J'étais en effet assez sceptique sur le résultat et je comprends maintenant pourquoi...
Je me disais même si mon disque fait à la va-vite sans optimisation ne passe pas, j'imaginais des figures plus complexes à déplacer... C'est pour ça que j'avais abandonné.
Ta démo est tout à fait convaincante.
Merci pour tes compétences et le boulot fourni ! C'est sympa

Je vois ça de plus près...

**Archimède** · 15/02/2021, 15h53

modifier la const GROUP pour voir la différence.

En effet, en mettant GROUP à false, on voit bien la différence...

**Archimède** · 16/02/2021, 18h42

Super, je viens de faire un essai rapide avec le bout code précédent que je vais reprendre. (Faire des fonctions paramétrées pour les formes répétitives, profiter des rotate() c'est l'idéal...)
ça marche nickel !
Enfin, un outil intéressant...qui me fera oublier actionscript.

Le souci est que je ne vois pas bien comment redimensionner en fonction du viewport sans tout recréer...

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
 
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div id="disque_container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<script>
/**
 * plugin
 */
(function() {
    Raphael.fn.group = function(f, g) {
        var enabled = document.getElementsByTagName("svg").length > 0;
        if (!enabled) {
            // return a stub for VML compatibility
            return {
                add : function() {
                    // intentionally left blank
                }
            };
        }
      this.svg = "http://www.w3.org/2000/svg";
      this.defs = document.getElementsByTagName("defs")[f];
      this.svgcanv = document.getElementsByTagName("svg")[f];
      this.group = document.createElementNS(this.svg, "g");
      for(let i = 0;i < g.length;i++){
        this.group.appendChild(g[i].node);
      }
      this.svgcanv.appendChild(this.group);
      this.group.translate = function(c, a) {
        this.setAttribute("transform", "translate(" + c + "," + a + ") scale(" + this.getAttr("scale").x + "," + this.getAttr("scale").y + ")");
      };
      this.group.rotate = function(c, a, e) {
        this.setAttribute("transform", "translate(" + this.getAttr("translate").x + "," + this.getAttr("translate").y + ") scale(" + this.getAttr("scale").x + "," + this.getAttr("scale").y + ") rotate(" + c + "," + a + "," + e + ")");
      };
      this.group.scale = function(c, a) {
        this.setAttribute("transform", "scale(" + c + "," + a + ") translate(" + this.getAttr("translate").x + "," + this.getAttr("translate").y + ")");
      };
      this.group.push = function(c) {
        this.appendChild(c.node);
      };
      this.group.getAttr = function(c) {
        this.previous = this.getAttribute("transform") ? this.getAttribute("transform") : "";
        var a = [], e, h, j, b, d, k;
        a = this.previous.split(" ");
        for(i = 0;i < a.length;i++) {
          if(a[i].substring(0, 1) == "t") {
            d = a[i];
            b = d.split("(");
            d = b[1].substring(0, b[1].length - 1);
            b = [];
            b = d.split(",");
            e = b.length == 0 ? {x:0, y:0} : {x:b[0], y:b[1]}; 
          }else {
            if(a[i].substring(0, 1) == "r"){
              d = a[i];
              b = d.split("(");
              d = b[1].substring(0, b[1].length - 1);
              b = d.split(",");
              h = b.length == 0 ? {x:0, y:0, z:0} : {x:b[0], y:b[1], z:b[2]};
            }else {
              if(a[i].substring(0, 1) == "s") {
                d = a[i];
                b = d.split("(");
                d = b[1].substring(0, b[1].length - 1);
                b = d.split(",");
                j = b.length == 0 ? {x:1, y:1} : {x:b[0], y:b[1]};
              }
            }
          }
        }
        if(e == undefined) {
          e = {x:0, y:0};
        }
        if(h == undefined) {
          h = {x:0, y:0, z:0};
        }
        if(j == undefined) {
          j = {x:1, y:1};
        }
        if(c == "translate") {
            k = e;
        }else {
          if(c == "rotate") {
            k = h;
          }else {
            if(c == "scale") {
              k = j;
            }
          }
        }
        return k;
      };
      this.group.copy = function(el){
         this.copy = el.node.cloneNode(true);
         this.appendChild(this.copy);
      };
      return this.group;
    };
})();
//fin plugin
</script>
 
<script>
const pi=Math.PI;
const deg= 180/pi;
const rad=pi/180;
 
var disque_container=document.getElementById('disque_container');
var paper,disque,groupSVG;
 
 
 
var w=window.innerWidth;  //en fonction du viewport pour le resize
var  h=window.innerHeight;
var wc=h/1.02;
var hc=h/1.02;
var Ra=hc/2;
 
disque_container.style.position="absolute";
disque_container.style.left=w/3+"px";
disque_container.style.top=(h-h/1.02)/2+"px";
 
paper = Raphael("disque_container", wc, hc);
 
paper.setStart();  // on démarre le remplissage du groupe de paperformes
paper.circle(wc/2, hc/2, Ra).attr({
   fill:'#fffaf0',
   stroke: "#fffaf0",
   "stroke-width": 1   
});
paper.path("M{0} {1} L{2} {3}",0,Ra,2*Ra,Ra).attr({
     stroke: "black",
     "stroke-width": 1
});
paper.path("M{0} {1} L{2} {3}",Ra,0,Ra,2*Ra).attr({
     stroke: "black",
     "stroke-width": 1  
});
paper.circle(wc/2, hc/2, Ra/1.5).attr({
     stroke: "black",
     "stroke-width": 1  
});
paper.circle(wc/2, hc/2, Ra/4).attr({
     stroke: "black",
     "stroke-width": 1  
});
paper.circle(wc/2, hc/2, Ra/10).attr({
     stroke: "black",
     "stroke-width": 1  
});
paper.circle(wc/2, hc/2, Ra/70).attr({
     stroke: "black",
     "stroke-width": 1,
     fill:'#fffaf0' 
});
 
for (let i=0; i<360; i++){
   let teta=rad*i; 
   paper.path("M{0} {1} L{2} {3}",Ra*(1+9.7*Math.cos(teta)/10),Ra*(1+9.7*Math.sin(teta)/10),Ra*(1+Math.cos(teta)),Ra*(1+Math.sin(teta))).attr({
       stroke: "black",
       "stroke-width": 2   
    });
}
 
for (let j=0; j<36; j++){
    let teta2=pi*j/18; 
    paper.path("M{0} {1} L{2} {3}",Ra*(1+9.1*Math.cos(teta2)/10),Ra*(1+9.1*Math.sin(teta2)/10),Ra*(1+Math.cos(teta2)),Ra*(1+Math.sin(teta2))).attr({
       stroke: "black",
       "stroke-width": 2   
    });
 
   let angle='';
   if (j<=9) {angle=String(10*j);}
   else if ( (j>9) && (j<=18) ) {angle=String(90-(j-9)*10);}
   else if ( (j>18) && (j<=27) ) {angle=String((j-9)*10-90);}
   else {angle=String(170- (j-19)*10);}
   paper.text( Ra*(1+7/8*Math.cos(teta2) ) ,Ra*(1+7/8*Math.sin(teta2) ) , angle ).attr({
      "font-family":"Tahoma",
      "font-size":14,
      "font-weight": "bold",
      fill:'#555555'
   });
}
 
for (let k=0; k<72; k++){
   let teta3=5*rad*k; 
   paper.path("M{0} {1} L{2} {3}",Ra*(1+9.4*Math.cos(teta3)/10),Ra*(1+9.4*Math.sin(teta3)/10),Ra*(1+Math.cos(teta3)),Ra*(1+Math.sin(teta3))).attr({
       stroke: "black",
       "stroke-width": 2   
    });
}
disque=paper.setFinish(); //on récupère le tableau des paperformes (super et plus concis !)
disque.attr({"cursor" : "grab"});
 
 
groupSVG = paper.group(0, disque);  
 
     
 
var theta_start=0, theta_move=0, theta_end=0, theta_old=0;
 
function handleMouseMove(e){
  theta_move = Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*deg;
  theta_end = theta_move-theta_start+theta_old;
  groupSVG.rotate(-theta_end,Ra,Ra);  // rotation du groupe NICKEL !
}
 
    
function handleMouseUp(e){
  e.stopPropagation();
  disque.attr({"cursor" : "grab"});
  theta_old=theta_end;
  disque.unmousemove(handleMouseMove);
  disque.unmouseup(handleMouseUp);
}
 
function handleMouseDown(e){
   e.stopPropagation();
   e.preventDefault();
   disque.attr({"cursor" : "grabbing"});
   theta_start=Math.atan2(Ra-e.offsetY,e.offsetX-Ra)*deg; 
   disque.mousemove(handleMouseMove);
   disque.mouseup(handleMouseUp);
}
 
function handleResize(){
   w=window.innerWidth;
   h=window.innerHeight;
   wc=h/1.02;
   hc=h/1.02;
   Ra=hc/2;
   /** on est obligé de tout recréer ?   */ 
}
 
disque.mousedown(handleMouseDown);
window.addEventListener("mouseup", handleMouseUp);
//window.addEventListener('resize',handleResize);
</script>
 
</body>
</html>

**NoSmoking** · 16/02/2021, 19h10

comment redimensionner en fonction du viewport sans tout recréer...

je dirais que tu n'as pas à t'en soucier dans un premier temps, je m'explique :

Au départ on choisit une taille pour obtenir une définition du résultat correct.

En temps normal on fixe au SVG des dimensions et un attribut viewBox qui sont le reflet de la création, exemple :

Code html :

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

<svg height="400" width="400" viewBox="0 0 400 400">

Maintenant si je veux le rendre « responsive » il suffit de mettre les dimensions à 100% :

Code html :

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

<svg height="100%" width="100%" viewBox="0 0 400 400">

Avec Raphaël, tu peux arriver à cela en utilisant les méthodes Paper.setSize(width, height) et Paper.setViewBox(x, y, w, h, fit), ce qui devrait donner dans ton cas

Code :

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

1
2
paper.setViewBox(0, 0, RAYON * 2, RAYON * 2, true);
paper.setSize("100%", "100%");

et au resize ton SVG suivra les dimensions de son conteneur, si bien sur celui-ci est responsive.

Pas de prise de tête à avoir

**Archimède** · 16/02/2021, 19h20

Nickel, maintenant tout est clair.

Je devrais regarder la doc. plus sérieusement. Parfait !
J'aime bien des discussions comme celle-ci... C'est constructif.
Et encore merci pour tes recherches.

**NoSmoking** · 17/02/2021, 09h27

J'aime bien des discussions comme celle-ci... C'est constructif.

Merci à toi, cela change un peu de ceux qui viennent poser leur question, qui ont des réponses, et qui mettent leur discussion en résolue, ou non, sans aucun retour ! (mode légèrement désabusé !)

RaphaelJs _ rotation

JavaScript

Discussions similaires

Partager

Partager