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>