Drag and drop, canvas et JS

**stefh7** · 17/11/2011, 15h46

Hello à tous!

Je travaille sur un code pour interagir sur un canvas. dans ce canvas on peut déplacer à la souris un élément du dessin; j'utilise l'événement onmousedown pour actualiser le dessin de mon canvas en plaçant l'élément du dessin selon la position du curseur.

Ca fonctionne comme je le veux, à un détail prêt, c'est que l'élément est dessiné à partir de son bord haut gauche et je voudrais qu'il soit dessiné en tenant compte de l'écart entre les bords de l'élément et la position de la souris.

Je ne sais pas si mon explication est claire...

J'ajoute des images pour lillustrer (voir ci-dessous après le code).

Merci pour votre aide!

Voici le code dans une version prête à l'emploi si vous voulez le tester:

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
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
<!DOCTYPE html>
 
<html>
 
	<head>
		<title>Test canvas</title>
		<meta charset="utf-8" />
	</head>
 
	<body onload="draw()">
 
		<canvas id="canvas" width="400px" height="400px" style="border: 1px solid #999;"></canvas>
 
		<script type="text/javascript">
		//Initialisation canvas
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		function draw() {
 
			ctx.fillStyle = 'rgb(100,100,100)';
			ctx.fillRect(50,50,100,100);
 
		}
 
		//Drag and drop
		var DragHandler = {
 
			//Privé
			_oElem : null,
			_oX : 50,
			_oY : 50,
 
 
			//Public
			attach : function(oElem) {
				oElem.onmousedown = DragHandler._dragBegin;
 
				// callbacks
				oElem.dragBegin = new Function();
				oElem.drag = new Function();
				oElem.dragEnd = new Function();
 
				return oElem;
			},
 
 
			//Privé
			_dragBegin : function(e) {
				var oElem = DragHandler._oElem = this;
 
				e = e ? e : window.event;
 
				var x = e.clientX - oElem.offsetLeft;
				var y = e.clientY - oElem.offsetTop;
 
				oElem.dragBegin(oElem, x, y);
 
				if (x >= DragHandler._oX && x <= (DragHandler._oX + 100) && y >= DragHandler._oY && y <= (DragHandler._oY + 100)) {
 
					oElem.style.cursor = 'pointer';
					document.onmousemove = DragHandler._drag;
					document.onmouseup = DragHandler._dragEnd;
 
				}
				return false;
			},
 
			//Privé
			_drag : function(e) {
				var oElem = DragHandler._oElem;
 
				e = e ? e : window.event;
 
				var x = e.clientX - oElem.offsetLeft;
				var y = e.clientY - oElem.offsetTop;
 
				/*if (x > DragHandler._oX) {
					x = x - (x - DragHandler._oX);
				}
				if (y > DragHandler._oY) {
					y = y - (y - DragHandler._oY);
				}*/
 
				oElem.drag(oElem, x, y);
 
				ctx.clearRect(0, 0, 400, 400);
				ctx.fillStyle = 'rgb(100,200,50)';
				ctx.fillRect(x,y,100,100);
 
				DragHandler._oX = x;
				DragHandler._oY = y;
 
				return false;
			},
 
 
			//Privé
			_dragEnd : function() {
				var oElem = DragHandler._oElem;
 
				var x = x;
				var y = y;
 
				oElem.dragEnd(oElem, x, y);
 
				oElem.style.cursor = 'default';
 
				document.onmousemove = null;
				document.onmouseup = null;
				DragHandler._oElem = null;
			}
 
		}
 
		//Instanciation
		var d = DragHandler.attach(document.getElementById('canvas'));
		</script>
	</body>
 
</html>

Illustrations

1. Je place mon curseur sur la zone de l'élément à déplacer:

2 [!ok]. Au déplacement l'élément est redessiner à partir de son bord droit aux coordonnées de la souris:

3 [ok]. L'élément doit être redessiné en tenant compte de l'écart entre la position de la souris et les bords de l'élément:

**NoSmoking** · 17/11/2011, 22h23

Bonsoir,

Ca fonctionne comme je le veux, à un détail prêt, c'est que l'élément est dessiné à partir de son bord haut gauche et je voudrais qu'il soit dessiné en tenant compte de l'écart entre les bords de l'élément et la position de la souris.

c'est justement ce qui te manque, tu ne gères pas le deltaX et deltaY au moment du clic de démarrage.

Cela devrait donner un truc du style//Privé

Code :

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

1
2
3
4
5
6
7
8
9
10
_dragBegin : function(e) {
	var oElem = DragHandler._oElem = this;
 
	e = e ? e : window.event;
 
	var x = e.clientX - oElem.offsetLeft;
	var y = e.clientY - oElem.offsetTop;
	// calcul delta
	dX = x -posX_du_rectangle;
	dY = y -posY_du_rectangle;

ensuite bien sûr il te faut en tenir compte lorsque tu redessines ton rectangle

Code :

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

	ctx.fillRect( x -dX, y -dY, 100, 100);

**stefh7** · 17/11/2011, 22h53

Envoyé par NoSmoking

Bonsoir,c'est justement ce qui te manque, tu ne gères pas le deltaX et deltaY au moment du clic de démarrage.

Oui, c'est ce que j'essaie de gérer depuis le début... j'ai fait plusieurs tentatives dans ce sens là, sans succès, mais avec ton aide j'ai pu résoudre le problème. Voici donc le code corrigé et fonctionnel:

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
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
<!DOCTYPE html>
 
<html>
 
	<head>
		<title>Test canvas</title>
		<meta charset="utf-8" />
	</head>
 
	<body onload="draw()">
 
		<canvas id="canvas" width="400px" height="400px" style="border: 1px solid #999;"></canvas>
 
		<script type="text/javascript">
		//Initialisation canvas
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		function draw() {
 
			ctx.fillStyle = 'rgb(100,100,100)';
			ctx.fillRect(50,50,100,100);
 
		}
 
		//Drag and drop
		var DragHandler = {
 
			//Privé
			_oElem : null,
			_oX : 50,
			_oY : 50,
 
 
			//Public
			attach : function(oElem) {
				oElem.onmousedown = DragHandler._dragBegin;
 
				// callbacks
				oElem.dragBegin = new Function();
				oElem.drag = new Function();
				oElem.dragEnd = new Function();
 
				return oElem;
			},
 
 
			//Privé
			_dragBegin : function(e) {
				var oElem = DragHandler._oElem = this;
 
				e = e ? e : window.event;
 
				var x = e.clientX - oElem.offsetLeft;
				var y = e.clientY - oElem.offsetTop;
 
				dX = x -DragHandler._oX;
				dY = y -DragHandler._oY;
 
				oElem.dragBegin(oElem, x, y);
 
				if (x >= DragHandler._oX && x <= (DragHandler._oX + 100) && y >= DragHandler._oY && y <= (DragHandler._oY + 100)) {
 
					oElem.style.cursor = 'pointer';
					document.onmousemove = DragHandler._drag;
					document.onmouseup = DragHandler._dragEnd;
 
				}
				return false;
			},
 
			//Privé
			_drag : function(e) {
				var oElem = DragHandler._oElem;
 
				e = e ? e : window.event;
 
				var x = e.clientX - oElem.offsetLeft;
				var y = e.clientY - oElem.offsetTop;
 
				oElem.drag(oElem, x, y);
 
				ctx.clearRect(0, 0, 400, 400);
				ctx.fillStyle = 'rgb(100,200,50)';
				ctx.fillRect(x-dX,y-dY,100,100);
 
				DragHandler._oX = x-dX;
				DragHandler._oY = y-dY;
 
				return false;
			},
 
 
			//Privé
			_dragEnd : function() {
				var oElem = DragHandler._oElem;
 
				var x = x;
				var y = y;
 
				oElem.dragEnd(oElem, x, y);
 
				oElem.style.cursor = 'default';
 
				document.onmousemove = null;
				document.onmouseup = null;
				DragHandler._oElem = null;
			}
 
		}
 
		//Instanciation
		var d = DragHandler.attach(document.getElementById('canvas'));
		</script>
	</body>
 
</html>