From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../fr/web/api/element/mousemove_event/index.html | 161 --------------------- files/fr/web/api/element/mousemove_event/index.md | 161 +++++++++++++++++++++ 2 files changed, 161 insertions(+), 161 deletions(-) delete mode 100644 files/fr/web/api/element/mousemove_event/index.html create mode 100644 files/fr/web/api/element/mousemove_event/index.md (limited to 'files/fr/web/api/element/mousemove_event') diff --git a/files/fr/web/api/element/mousemove_event/index.html b/files/fr/web/api/element/mousemove_event/index.html deleted file mode 100644 index d848446fb1..0000000000 --- a/files/fr/web/api/element/mousemove_event/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: 'Element : évènement mousemove' -slug: Web/API/Element/mousemove_event -tags: - - API - - DOM - - Event - - Interface - - Reference - - events - - mousemove -translation_of: Web/API/Element/mousemove_event ---- -
{{APIRef}}
- -

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

- - - - - - - - - - - - - - - - - - - - -
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
- -

Exemples

- -

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

- -

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

- -

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

- -

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

- -

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

- -

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

- -

HTML

- -
<h1>Dessiner grâce aux évènements de souris</h1>
-<canvas id="myPics" width="560" height="360"></canvas>
-
- -

CSS

- -
canvas {
-  border: 1px solid black;
-  width: 560px;
-  height: 360px;
-}
- -

JavaScript

- -
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
-// la souris entraîne un dessin sur le canevas
-let isDrawing = false;
-let x = 0;
-let y = 0;
-
-const myPics = document.getElementById('myPics');
-const context = myPics.getContext('2d');
-
-// On récupère le décalage du canevas en x et y par rapport aux bords
-// de la page
-const rect = myPics.getBoundingClientRect();
-
-// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
-// et mouseup
-myPics.addEventListener('mousedown', e => {
-  x = e.clientX - rect.left;
-  y = e.clientY - rect.top;
-  isDrawing = true;
-});
-
-myPics.addEventListener('mousemove', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = e.clientX - rect.left;
-    y = e.clientY - rect.top;
-  }
-});
-
-window.addEventListener('mouseup', e => {
-  if (isDrawing === true) {
-    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
-    x = 0;
-    y = 0;
-    isDrawing = false;
-  }
-});
-
-function drawLine(context, x1, y1, x2, y2) {
-  context.beginPath();
-  context.strokeStyle = 'black';
-  context.lineWidth = 1;
-  context.moveTo(x1, y1);
-  context.lineTo(x2, y2);
-  context.stroke();
-  context.closePath();
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemples", 640, 450)}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
- -

Compatibilité des navigateurs

- -

{{Compat("api.Element.mousemove_event")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/element/mousemove_event/index.md b/files/fr/web/api/element/mousemove_event/index.md new file mode 100644 index 0000000000..d848446fb1 --- /dev/null +++ b/files/fr/web/api/element/mousemove_event/index.md @@ -0,0 +1,161 @@ +--- +title: 'Element : évènement mousemove' +slug: Web/API/Element/mousemove_event +tags: + - API + - DOM + - Event + - Interface + - Reference + - events + - mousemove +translation_of: Web/API/Element/mousemove_event +--- +
{{APIRef}}
+ +

L'évènement mousemove est déclenché à partir d'un élément lorsqu'un dispositif de pointage (ex. une souris) est déplacé lorsque le curseur est à l'intérieur de l'élément.

+ + + + + + + + + + + + + + + + + + + + +
Se propage/remonte dans le DOMOui
AnnulableOui
Interface{{domxref("MouseEvent")}}
Propriété pour la gestion d'évènement{{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}}
+ +

Exemples

+ +

Dans l'exemple suivant, on utilise les évènements mousedown, mousemove et mouseup pour permettre à l'utilisateur de dessiner sur un canevas HTML (le dessin est simple : une ligne dont l'épaisseur vaut 1 et dont la couleur est toujours noire).

+ +

Lors du chargement de la page, les constantes myPics et context sont créées comme références au canevas et au contexte 2D qui seront utilisés pour le dessin. Enfin, la constante rect permet de stocker les coordonnées relatives du canevas par rapport à la page.

+ +

Le dessin commence quand l'évènement mousedown est déclenché. On stocke les coordonnées du pointeur dans les variables x et y puis on passe la variable isDrawing à true pour indiquer qu'un dessin est en cours.

+ +

Lorsque le pointeur se déplace sur la page, l'évènement mousemove est déclenché. Si isDrawing vaut true, le gestionnaire d'évènement appelle la fonction drawLine() afin de dessiner une ligne entre le point de coordonnées x et y (stockées dans ces variables) et la position actuelle (N.B. les coordonnées x et y sont "corrigées" avec la constante rect pour tenir compte du décalage entre le canevas et la page).

+ +

Lorsque la fonction drawLine() a fini son exécution, on ajuste les coordonnées courante en les stockant dans x et y.

+ +

Lorsque l'évènement mouseup est déclenché, on dessine le segment final du dessin en cours, on passe x et y à 0 puis on arrête le dessin en passant isDrawing à false.

+ +

HTML

+ +
<h1>Dessiner grâce aux évènements de souris</h1>
+<canvas id="myPics" width="560" height="360"></canvas>
+
+ +

CSS

+ +
canvas {
+  border: 1px solid black;
+  width: 560px;
+  height: 360px;
+}
+ +

JavaScript

+ +
// Un booléen qui, lorsqu'il est vrai, indique que le déplacement de
+// la souris entraîne un dessin sur le canevas
+let isDrawing = false;
+let x = 0;
+let y = 0;
+
+const myPics = document.getElementById('myPics');
+const context = myPics.getContext('2d');
+
+// On récupère le décalage du canevas en x et y par rapport aux bords
+// de la page
+const rect = myPics.getBoundingClientRect();
+
+// On ajoute les gestionnaires d'évènements pour mousedown, mousemove
+// et mouseup
+myPics.addEventListener('mousedown', e => {
+  x = e.clientX - rect.left;
+  y = e.clientY - rect.top;
+  isDrawing = true;
+});
+
+myPics.addEventListener('mousemove', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = e.clientX - rect.left;
+    y = e.clientY - rect.top;
+  }
+});
+
+window.addEventListener('mouseup', e => {
+  if (isDrawing === true) {
+    drawLine(context, x, y, e.clientX - rect.left, e.clientY - rect.top);
+    x = 0;
+    y = 0;
+    isDrawing = false;
+  }
+});
+
+function drawLine(context, x1, y1, x2, y2) {
+  context.beginPath();
+  context.strokeStyle = 'black';
+  context.lineWidth = 1;
+  context.moveTo(x1, y1);
+  context.lineTo(x2, y2);
+  context.stroke();
+  context.closePath();
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples", 640, 450)}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('UI Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mousemove', 'mousemove')}}{{Spec2('DOM3 Events')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.Element.mousemove_event")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf