8000 Add support for rubberband drawing. · matplotlib/matplotlib@8f414b4 · GitHub
[go: up one dir, main page]
Skip to content

Commit 8f414b4

Browse files
mdboommdboom
committed
Add support for rubberband drawing.
1 parent bf11a13 commit 8f414b4

File tree

3 files changed

+57
-12
lines changed

3 files changed

+57
-12
lines changed

‎lib/matplotlib/backends/backend_webagg.py

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,15 @@ def set_cursor(self, cursor):
326326
def dynamic_update(self):
327327
self.canvas.draw_idle()
328328

329+
def draw_rubberband(self, event, x0, y0, x1, y1):
330+
self.canvas.send_event(
331+
"rubberband", x0=x0, y0=y0, x1=x1, y1=y1)
332+
333+
def release_zoom(self, event):
334+
super(NavigationToolbar2WebAgg, self).release_zoom(event)
335+
self.canvas.send_event(
336+
"rubberband", x0=-1, y0=-1, x1=-1, y1=-1)
337+
329338

330339
class WebAggApplication(tornado.web.Application):
331340
initialized = False

‎lib/matplotlib/backends/web_static/index.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,25 @@
77
onkeydown="key_event(event, 'key_press')"
88
onkeyup="key_event(event, 'key_release')">
99
<div id="mpl-div">
10-
<div id="mpl-warnings" class="mpl-warnings"></div>
10+
<div id="mpl-warnings" class="mpl-warnings">
11+
</div>
12+
13+
<div id="mpl-canvas-div"
14+
style="position: relative;">
15+
<canvas id="mpl-canvas"
16+
class="mpl-canvas"
17+
width="800" height="600"
18+
style="position: absolute; left: 0; top: 0; z-index: 0">
19+
</canvas>
1120

12-
<canvas id="mpl-canvas"
13-
class="mpl-canvas"
14-
width="800" height="600"
15-
onmousedown="mouse_event(event, 'button_press')"
16-
onmouseup="mouse_event(event, 'button_release')"
17-
onmousemove="mouse_event(event, 'motion_notify')">
18-
</canvas>
21+
<canvas id="mpl-rubberband-canvas"
22+
width="800" height="600"
23+
onmousedown="mouse_event(event, 'button_press')"
24+
onmouseup="mouse_event(event, 'button_release')"
25+
onmousemove="mouse_event(event, 'motion_notify')"
26+
style="position: absolute; left: 0; top: 0; z-index: 1">
27+
</canvas>
28+
</div>
1929

2030
<div id="toolbar">
2131
{% for name, tooltip, image, method in toolitems %}

‎lib/matplotlib/backends/web_static/mpl.js

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,12 @@ window.onload = function() {
2424
};
2525

2626
var message = document.getElementById("mpl-message");
27+
var canvas_div = document.getElementById("mpl-canvas-div");
2728
var canvas = document.getElementById("mpl-canvas");
29+
var context = canvas.getContext("2d");
30+
var rubberband_canvas = document.getElementById("mpl-rubberband-canvas");
31+
var rubberband_context = rubberband_canvas.getContext("2d");
32+
rubberband_context.strokeStyle = "#000000";
2833

2934
ws = new this.WebSocket(ws_url("ws"));
3035

@@ -101,24 +106,45 @@ window.onload = function() {
101106
var div = document.getElementById("mpl-div");
102107
canvas.width = size[0];
103108
canvas.height = size[1];
109+
rubberband_canvas.width = size[0];
110+
rubberband_canvas.height = size[1];
111+
canvas_div.style.width = size[0];
112+
canvas_div.style.height = size[1];
104113
div.style.width = size[0];
105114
ws.send(JSON.stringify({type: 'refresh'}));
106115
}
107116
break;
117+
118+
case 'rubberband':
119+
var x0 = msg['x0'];
120+
var y0 = rubberband_canvas.height - msg['y0'];
121+
var x1 = msg['x1'];
122+
var y1 = rubberband_canvas.height - msg['y1'];
123+
x0 = Math.floor(x0) + 0.5;
124+
y0 = Math.floor(y0) + 0.5;
125+
x1 = Math.floor(x1) + 0.5;
126+
y1 = Math.floor(y1) + 0.5;
127+
var min_x = Math.min(x0, x1);
128+
var min_y = Math.min(y0, y1);
129+
var width = Math.abs(x1 - x0);
130+
var height = Math.abs(y1 - y0);
131+
132+
rubberband_context.clearRect(0, 0, rubberband_canvas.width, rubberband_canvas.height);
133+
rubberband_context.strokeRect(min_x, min_y, width, height);
134+
break;
108135
}
109136
};
110137

111-
var context = canvas.getContext("2d");
112138
imageObj = new Image();
113139
imageObj.onload = function() {
114140
context.drawImage(imageObj, 0, 0);
115141
};
116142
};
117143

118144
function mouse_event(event, name) {
119-
var canvas = document.getElementById("mpl-canvas");
120-
var x = event.pageX - canvas.offsetLeft;
121-
var y = event.pageY - canvas.offsetTop;
145+
var canvas_div = document.getElementById("mpl-canvas-div");
146+
var x = event.pageX - canvas_div.offsetLeft;
147+
var y = event.pageY - canvas_div.offsetTop;
122148

123149
ws.send(JSON.stringify(
124150
{type: name,

0 commit comments

Comments
 (0)
0