Implement stroke_rects

Author: martinRenou

docs/source/drawing_shapes.rst

@@ -18,11 +18,12 @@ left corner of the blue square becomes x pixels from the left and y pixels from
 Drawing rectangles
 ------------------
 
-There are three methods that draw rectangles on the canvas:
+There are four methods that draw rectangles on the canvas:
 
 - ``fill_rect(x, y, width, height=None)``: Draws a filled rectangle. If ``height`` is None, it is set to the same value as ``width``.
 - ``stroke_rect(x, y, width, height=None)``: Draws a rectangular outline. If ``height`` is None, it is set to the same value as ``width``.
 - ``fill_rects(x, y, width, height=None)``: Draws filled rectangles. Where ``x``, ``y``, ``width`` and ``height`` are either integers, lists of integers or NumPy arrays. If ``height`` is None, it is set to the same value as ``width``.
+- ``stroke_rects(x, y, width, height=None)``: Draws rectangular outlines. Where ``x``, ``y``, ``width`` and ``height`` are either integers, lists of integers or NumPy arrays. If ``height`` is None, it is set to the same value as ``width``.
 
 You can also clear a certain canvas rectangle area:
 
@@ -42,7 +43,7 @@ You can also clear a certain canvas rectangle area:
 
 .. image:: images/rect.png
 
-``fill_rects`` is a blazingly fast way of drawing up to a million rectangles at once:
+``fill_rects`` and ``stroke_rects`` are blazingly fast ways of drawing up to a million rectangles at once:
 
 .. code:: Python
 

examples/particle_system.ipynb

@@ -22,8 +22,8 @@
    "source": [
     "n_particles = 100_000\n",
     "\n",
-    "x = np.array(np.random.rayleigh(100, n_particles), dtype=int)\n",
-    "y = np.random.randint(0, 499, n_particles)\n",
+    "x = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
+    "y = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
     "size = np.random.randint(1, 3, n_particles)"
    ]
   },
@@ -84,7 +84,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "# Moving particles"
+    "# Stroked particles"
    ]
   },
   {
@@ -93,7 +93,29 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "n = 2_000"
+    "n_particles = 5_000\n",
+    "\n",
+    "x = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
+    "y = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
+    "size = np.random.randint(5, 10, n_particles)\n",
+    "\n",
+    "canvas = Canvas(size=(800, 500))\n",
+    "\n",
+    "canvas.fill_style = '#c0dced'\n",
+    "canvas.stroke_style = '#3279a8'\n",
+    "canvas.line_width = 1.5\n",
+    "\n",
+    "canvas.fill_rects(x, y, size)\n",
+    "canvas.stroke_rects(x, y, size)\n",
+    "\n",
+    "canvas"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Moving particles"
    ]
   },
   {
@@ -102,8 +124,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "canvas = Canvas(size=(800, 500))\n",
-    "canvas"
+    "n = 2_000"
    ]
   },
   {
@@ -131,8 +152,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "x = np.array(np.random.rayleigh(100, n_particles), dtype=int)\n",
-    "y = np.random.randint(0, 499, n_particles)\n",
+    "x = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
+    "y = np.array(np.random.rayleigh(250, n_particles), dtype=np.int32)\n",
     "size = np.random.randint(1, 3, n_particles)\n",
     "speed_x = np.random.randint(-40, 40, n_particles)\n",
     "speed_y = np.random.randint(-40, 40, n_particles)"
@@ -144,6 +165,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "canvas = Canvas(size=(800, 500))\n",
+    "\n",
+    "display(canvas)\n",
+    "\n",
     "canvas.fill_style = 'green'\n",
     "\n",
     "for _ in range(75):\n",

ipycanvas/canvas.py

@@ -118,7 +118,7 @@ def stroke_rect(self, x, y, width, height=None):
         self._send_canvas_command('strokeRect', (x, y, width, height))
 
     def fill_rects(self, x, y, width, height=None):
-        """Draw filled rectangles of size ``(width, height)`` at the ``(x, y)`` position with a given ``fill_style``.
+        """Draw filled rectangles of sizes ``(width, height)`` at the ``(x, y)`` positions.
 
         Where ``x``, ``y``, ``width`` and ``height`` arguments are NumPy arrays, lists or scalar values.
         If ``height`` is None, it is set to the same value as width.
@@ -137,6 +137,26 @@ def fill_rects(self, x, y, width, height=None):
 
         self._send_canvas_command('fillRects', args, buffers)
 
+    def stroke_rects(self, x, y, width, height=None):
+        """Draw a rectangular outlines of sizes ``(width, height)`` at the ``(x, y)`` positions.
+
+        Where ``x``, ``y``, ``width`` and ``height`` arguments are NumPy arrays, lists or scalar values.
+        If ``height`` is None, it is set to the same value as width.
+        """
+        args = []
+        buffers = []
+
+        populate_args(x, args, buffers)
+        populate_args(y, args, buffers)
+        populate_args(width, args, buffers)
+
+        if height is None:
+            args.append(args[-1])
+        else:
+            populate_args(height, args, buffers)
+
+        self._send_canvas_command('strokeRects', args, buffers)
+
     def clear_rect(self, x, y, width, height=None):
         """Clear the specified rectangular area of size ``(width, height)`` at the ``(x, y)`` position, making it fully transparent."""
         if height is None:

src/widget.ts

@@ -81,7 +81,10 @@ class CanvasModel extends DOMWidgetModel {
         this.putImageData(command.args, buffers);
         break;
       case 'fillRects':
-        this.fillRects(command.args, buffers);
+        this.drawRects(command.args, buffers, 'fillRect');
+        break;
+      case 'strokeRects':
+        this.drawRects(command.args, buffers, 'strokeRect');
         break;
       case 'set':
         this.setAttr(command.attr, command.value);
@@ -113,7 +116,7 @@ class CanvasModel extends DOMWidgetModel {
     this.ctx.drawImage(offscreenCanvas, dx, dy);
   }
 
-  private fillRects(args: any[], buffers: any) {
+  private drawRects(args: any[], buffers: any, commandName: string) {
     const x = getArg(args[0], buffers);
     const y = getArg(args[1], buffers);
     const width = getArg(args[2], buffers);
@@ -122,7 +125,7 @@ class CanvasModel extends DOMWidgetModel {
     const numberRects = Math.min(x.length, y.length, width.length, height.length);
 
     for (let idx = 0; idx < numberRects; ++idx) {
-      this.ctx.fillRect(x.getItem(idx), y.getItem(idx), width.getItem(idx), height.getItem(idx));
+      this.executeCommand(commandName, [x.getItem(idx), y.getItem(idx), width.getItem(idx), height.getItem(idx)]);
     }
   }