Obtenir la position d'une zone sélectionnée par l'utilisateur

**Cafeinoman** · 22/06/2016, 07h31

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.

**EddiGordo** · 22/06/2016, 09h43

Bonjour,

Un exemple vaut mieux qu'un long discours.

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>

A étudier pour adaptation à tes besoins, en espérant que ça t'aide un peu.

**Cafeinoman** · 22/06/2016, 19h40

Merci beaucoup, je test ca et je fais un retour.

Obtenir la position d'une zone sélectionnée par l'utilisateur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager