Merge pull request matplotlib#30560 from lucasgruwez/bugfix/consistent-rubber-bands

Consistent zoom boxes

Author: timhoffm

doc/release/next_whats_new/zoom_boxes.rst

@@ -0,0 +1,4 @@
+Consistent zoom boxes
+---------------------
+
+Zooming now has a consistent dashed box style across all backends.

lib/matplotlib/backends/_backend_tk.py

@@ -769,7 +769,7 @@ def draw_rubberband(self, event, x0, y0, x1, y1):
         y1 = height - y1
         self.canvas._rubberband_rect_black = (
             self.canvas._tkcanvas.create_rectangle(
-                x0, y0, x1, y1))
+                x0, y0, x1, y1, outline='black'))
         self.canvas._rubberband_rect_white = (
             self.canvas._tkcanvas.create_rectangle(
                 x0, y0, x1, y1, outline='white', dash=(3, 3)))

lib/matplotlib/backends/web_backend/js/mpl.js

@@ -325,7 +325,6 @@ mpl.figure.prototype._init_canvas = function () {
     canvas_div.appendChild(rubberband_canvas);
 
     this.rubberband_context = rubberband_canvas.getContext('2d');
-    this.rubberband_context.strokeStyle = '#000000';
 
     this._resize_canvas = function (width, height, forward) {
         if (forward) {
@@ -469,19 +468,38 @@ mpl.figure.prototype.handle_rubberband = function (fig, msg) {
     y0 = Math.floor(y0) + 0.5;
     x1 = Math.floor(x1) + 0.5;
     y1 = Math.floor(y1) + 0.5;
-    var min_x = Math.min(x0, x1);
-    var min_y = Math.min(y0, y1);
-    var width = Math.abs(x1 - x0);
-    var height = Math.abs(y1 - y0);
 
-    fig.rubberband_context.clearRect(
+    var ctx = fig.rubberband_context;
+    ctx.clearRect(
         0,
         0,
         fig.canvas.width / fig.ratio,
         fig.canvas.height / fig.ratio
     );
 
-    fig.rubberband_context.strokeRect(min_x, min_y, width, height);
+    var drawRubberband = function () {
+        // Draw the lines from x0, y0 towards x1, y1 so that the
+        // dashes don't "jump" when moving the zoom box.
+        ctx.beginPath();
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x0, y1);
+        ctx.moveTo(x0, y0);
+        ctx.lineTo(x1, y0);
+        ctx.moveTo(x0, y1);
+        ctx.lineTo(x1, y1);
+        ctx.moveTo(x1, y0);
+        ctx.lineTo(x1, y1);
+        ctx.stroke();
+    };
+
+    fig.rubberband_context.lineWidth = 1;
+    fig.rubberband_context.setLineDash([3]);
+    fig.rubberband_context.lineDashOffset = 0;
+    fig.rubberband_context.strokeStyle = '#000000';
+    drawRubberband();
+    fig.rubberband_context.strokeStyle = '#ffffff';
+    fig.rubberband_context.lineDashOffset = 3;
+    drawRubberband();
 };
 
 mpl.figure.prototype.handle_figure_label = function (fig, msg) {