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.
«Dieu ne joue pas aux dés.» - Albert Einstein. Et pan! 30 ans de retard dans la théorie quantique!
«Tout n'est pas politique, mais la politique s'intéresse à tout.» - Nicolas Machiavel. Et surtout à ceux qui ne s'y intéressent pas.
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.
«Dieu ne joue pas aux dés.» - Albert Einstein. Et pan! 30 ans de retard dans la théorie quantique!
«Tout n'est pas politique, mais la politique s'intéresse à tout.» - Nicolas Machiavel. Et surtout à ceux qui ne s'y intéressent pas.
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