Sélectionner un dessin pour le déplacer
Bonjour ,
j'ai ici un script qui me permet de dessiner sur un canvas . Je voudrais savoir comment je pourrais ajouter à mon script une commande qui , lorsque je clique sur le bouton « Sélection en rectangle » je puisse faire un glissement pour sélectionner tous les traits d'encre de mon dessin ou de ma forme dans le rectangle entre le point de départ et le point final du glissement, les traits qui sont entièrement dans le rectangle doivent être sélectionnés pour que la sélection ait lieu.
et si possible, à chaque fois que j'effectue une sélection en rectangle, le dessin anciennement sélectionné doit être désélectionnés par le système pour me permettre de recommencer une nouvelle sélection de zéro.
Voici le script et j’espère que vous pourriez m'aider , je suis coincé :(:(
Code:
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| <html>
<body>
<script language="JavaScript">
var MODE_DRAW = 1;
var MODE_SELECT = 2;
var MODE_MOVE = 3;
var mode = MODE_DRAW;
</script>
<canvas id="myCanvas" width="500" height="600" style="border:2px solid #000000;"> </canvas>
<br/>
<label><input type='radio' name="radio_mode" onclick='setMode(MODE_DRAW);' checked>Draw</label>
<label><input type='radio' name="radio_mode" onclick='setMode(MODE_SELECT);'>Rectangle Select</label>
<label><input type='radio' name="radio_mode" onclick='setMode(MODE_MOVE);'>Move Selection</label>
<button onclick="clearButtonHandler()">Delete All</button>
<script language="JavaScript">
var canvas = document.getElementById("myCanvas");
var canvas_context = canvas.getContext("2d");
var mouse_drag_start_x = 0;
var mouse_drag_start_y = 0;
var mouse_previous_x = 0;
var mouse_previous_y = 0;
var buttonIsDown = false;
// this is the set of strokes already drawn
var arrayOfStrokes = [];
// this is the set of strokes that are currently selected
var selectedStrokes = [];
// this is the stroke currently being drawn
var stroke = []; // each stroke is an array of points
function mouseDownHandler(e) {
buttonIsDown = true;
var canvas_rectangle = canvas.getBoundingClientRect();
var event_x = e.clientX - canvas_rectangle.left;
var event_y = e.clientY - canvas_rectangle.top;
//console.log("mouse down");
//console.log(" " + event_x + "," + event_y);
stroke = [];
switch ( mode ) {
case MODE_DRAW :
stroke.push( { x : event_x, y : event_y } );
break;
case MODE_SELECT :
break;
case MODE_MOVE :
break;
}
mouse_drag_start_x = mouse_previous_x = event_x;
mouse_drag_start_y = mouse_previous_y = event_y;
}
function mouseUpHandler(e) {
buttonIsDown = false;
var canvas_rectangle = canvas.getBoundingClientRect();
var event_x = e.clientX - canvas_rectangle.left;
var event_y = e.clientY - canvas_rectangle.top;
// console.log("mouse up");
switch ( mode ) {
case MODE_DRAW :
if ( stroke.length > 2 ) {
arrayOfStrokes.push( stroke );
}
stroke = [];
break;
case MODE_SELECT :
break;
case MODE_MOVE :
break;
}
mouse_previous_x = event_x;
mouse_previous_y = event_y;
}
function mouseMoveHandler(e) {
var canvas_rectangle = canvas.getBoundingClientRect();
var event_x = e.clientX - canvas_rectangle.left;
var event_y = e.clientY - canvas_rectangle.top;
//console.log("mouse move");
switch ( mode ) {
case MODE_DRAW :
if ( buttonIsDown ) {
stroke.push( { x : event_x, y : event_y } );
}
break;
case MODE_SELECT :
break;
case MODE_MOVE :
break;
}
redraw();
mouse_previous_x = event_x;
mouse_previous_y = event_y;
}
canvas.addEventListener('mousedown',mouseDownHandler);
canvas.addEventListener('mouseup',mouseUpHandler);
canvas.addEventListener('mousemove',mouseMoveHandler);
function drawStroke( s ) {
canvas_context.beginPath();
for ( var i = 0; i < s.length; ++i ) {
var x = s[i].x;
var y = s[i].y;
if ( i === 0 ) {
canvas_context.moveTo(x,y);
}
else {
canvas_context.lineTo(x,y);
}
}
canvas_context.stroke();
}
var redraw = function() {
canvas_context.clearRect(0, 0, canvas.width, canvas.height);
canvas_context.strokeStyle = "#000000";
for ( var i = 0; i < arrayOfStrokes.length; ++i ) {
drawStroke( arrayOfStrokes[i] );
}
if ( buttonIsDown ) {
canvas_context.strokeStyle = "#ff0000";
drawStroke( stroke );
}
}
redraw();
var setMode = function( m ) {
mode = m;
//console.log("The current mode is " + mode );
}
function clearButtonHandler() {
arrayOfStrokes = [];
redraw();
}
</script>
</body>
</html> |
https://codepen.io/vitzar/pen/mdbYMGR
