Bonjour à tous,
je souhaiterai savoir s'il est possible d'obtenir les coordonnées d'une zone de sélection tracée par l'utilisateur. Le but est d'obtenir les x et y du point supérieur gauche et la taille du rectangle de sélection.
Merci d'avance.
Bonjour à tous,
je souhaiterai savoir s'il est possible d'obtenir les coordonnées d'une zone de sélection tracée par l'utilisateur. Le but est d'obtenir les x et y du point supérieur gauche et la taille du rectangle de sélection.
Merci d'avance.
Bonjour,
Un exemple vaut mieux qu'un long discours.
A étudier pour adaptation à tes besoins, en espérant que ça t'aide un peu.
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 <!DOCTYPE HTML> <html> <head> <title>Test</title> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> <style> html, body { padding: 0; margin: 0; } .whiteBoard { width: 1000px; height: 800px; border: solid red 2px; cursor: crosshair; } .marquee { position: absolute; left: 0px; top: 0px; width: 20px; height: 20px; border: dotted 1px grey; } .cache { display: none; } </style> <script> var isDrawing = false; var marqueeCoords = {left: undefined, top: undefined, width: undefined, height: undefined, ol: undefined, ot: undefined}; $(document) .ready(init); function init() { $('.whiteBoard') .on ( 'mousedown', function (e) { $('.marquee') .removeClass('cache'); marqueeCoords.ol = e.clientX; marqueeCoords.ot = e.clientY; } ) .on ( 'mouseup', function (e) { $('.marquee') .addClass('cache'); $('.coords').html(JSON.stringify({gauche: marqueeCoords.left, haut: marqueeCoords.top, largeur: marqueeCoords.width, hauteur: marqueeCoords.height, temoin: marqueeCoords.tm})); marqueeCoords = {left: undefined, top: undefined, width: undefined, height: undefined, ol: undefined, ot: undefined}; $('.marquee') .css({left: '0px', top: '0px', width: '0px', height: '0px'}); } ) .on ( 'mousemove', function (e) { marqueeCoords.width = e.clientX - marqueeCoords.ol; marqueeCoords.height = e.clientY - marqueeCoords.ot; marqueeCoords.left = marqueeCoords.ol; marqueeCoords.top = marqueeCoords.ot; if (marqueeCoords.width < 0) { marqueeCoords.left += marqueeCoords.width; marqueeCoords.width = Math.abs(marqueeCoords.width); } if (marqueeCoords.height < 0) { marqueeCoords.top += marqueeCoords.height; marqueeCoords.height = Math.abs(marqueeCoords.height); } $('.marquee') .css({left: marqueeCoords.left + 'px', top: marqueeCoords.top + 'px', width: marqueeCoords.width + 'px', height: marqueeCoords.height + 'px'}); } ); } </script> </head> <body> <div class="whiteBoard"> <div class="marquee cache"> </div> </div> <div class="coords"></div> </body> </html>
Merci beaucoup, je test ca et je fais un retour.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager