<canvas> Récupérer la position de la souris

**Nicolas Legrand** · 14/12/2019, 16h57

Bonjour, je viens vers vous car j'essaie de faire un petit programme pour dessiner avec ma souris à l'intérieur de l'élément Canvas. (je suis étudiant débutant)
En gros je n'arrive pas à comprendre comment faire pour déplacer mon canvas via le css et garder l'élément fonctionnel.
comme l'exemple suivant j'ajoute une marge gauche via css et quand je dessine sur le Canvas rien ne se passe en revanche
les coordonnées pour me permettre de dessiner commence à partir du coin gauche de la fenêtre. Si quelqu'un pouvait me guider afin de progresser merci beaucoup et bon week end.

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
<!DOCTYPE html>
<html>
 
		<head>
			<meta charset="UTF-8">
			<link rel="stylesheet" href="style.css">
      <title> canvas </title>
		</head>
 
        <body>
          <div id="moncanvas">
 
              <canvas>
              </canvas>
           </div>   
 
        	 <script src="canvas.js">
        	 </script>
        </body>
 
</html>

Code CSS :

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

1
2
3
4
5
6
canvas
{
  margin-left: 500px;
border: 5px solid black;
background-color:silver;
}

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
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
var canvas = document.querySelector("canvas");  // on va chercher la l'élément canvas 
 
 
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d'); // on lui définit un context 2d
 
// last known position
//dernière position connue
//x coordonées horizontale 
//y coordonées verticales
var pos = {x:0, y:0}; // dernière position connu en gros par défault indique en haut à gauche point de départ
console.log(pos);
 
//window.addEventListener('resize', resize);     //redimension du canvas si besoin
 
document.addEventListener('mousemove', draw); // L'événement se produit lorsque le pointeur se déplace au-dessus d'un élément ou de ses enfants.
document.addEventListener('mousedown', setPosition); //  declenche un évènement quand on appuie sur un bouton.
document.addEventListener('mouseenter', setPosition); //  L'événement se produit lorsque le pointeur (pointer) est déplacé sur un élément.
 
//Fonction SetPosition
 
// nouvelle position de la souris quand le bouton est relâché
// new position from mouse event
function setPosition(e) {
  pos.X = e.clientX; //  clientX = Renvoie la coordonnée horizontale du pointeur de la souris par rapport à la fenêtre courante.
  pos.y = e.clientY; //  clientY = Renvoie la coordonnée verticale du pointeur de la souris par rapport à la fenêtre courante.
}
 
//--- function draw ----- 
 
function draw(e) {
  // mouse left button must be pressed
  if (e.buttons !== 1) return;    // 1 = clicgauche de la souris   si le btn 1 est actionné alors on retour la fonction draw
 
  ctx.beginPath(); // begin   // permet de définir un premier chemin du tracé
//console.log(ctx.beginPath);
  ctx.lineWidth = 5; // taille de la largeur du trait de dessin
  ctx.lineCap = 'round'; // forme de la fin  du trait de dessin
  ctx.strokeStyle = '#c0392b'; // couleur du trait de dessin
 
  ctx.moveTo(pos.x, pos.y); // from  // méthode CanvasRenderingContext2D.moveTo() de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées (x, y).
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to    //La méthode CanvasRenderingContext2D.lineTo() de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées x, y spécifiées avec une ligne droite (sans tracer réellement le chemin).
 
  ctx.stroke(); // draw it!
}

**NoSmoking** · 15/12/2019, 06h47

Bonjour,
première chose à dire est que le nom de ta fonction setPosition n'est pas judicieux car il s'agit non pas d'une affectation, set, mais d'une récupération, get, je verrais donc plus un nom du style getMousePosition.

Ceci étant, comme tu places tes écouteurs sur le document il te faut tenir compte de la position de ton <canvas> par rapport à celui-ci

Code :

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

1
2
3
4
5
6
// si document.addEventListener()
function getMousePosition(e) {
  var rect = canvas.getBoundingClientRect();
  pos.x = e.clientX - rect.left;
  pos.y = e.clientY - rect.top;
}

Un autre façon de faire est de placer les écouteurs sur l'élément <canvas> ce qui me paraît plus judicieux, dans ce cas la fonction de récupération de la position de la souris devient :

Code :

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

1
2
3
4
5
// si canvas.addEventListener()
function getMousePosition(e) {
  pos.x = e.offsetX;
  pos.y = e.offsetY;
}

**Nicolas Legrand** · 17/12/2019, 09h22

Bonjour,

Effectivement getMousePosition est bien plus pertinent vous avez raison, et oui c'était bien ça mon problème le e.offset.
Merci d'avoir répondu si vite à ma question et de m'avoir apporté une réponse très clair.

Bonne journée.

<canvas> Récupérer la position de la souris

JavaScript

Discussions similaires

Partager

Partager