Merge pull request #152 from martinRenou/stroke_lines

Add stroke_lines method

Author: martinRenou

examples/plotting.ipynb

@@ -241,19 +241,12 @@
     "            # Draw lines\n",
     "            n_points = min(self.x.shape[0], self.y.shape[0])\n",
     "\n",
-    "            plot_layer.begin_path()\n",
     "            plot_layer.stroke_style = self.line_color\n",
     "            plot_layer.line_width = self.line_width\n",
     "            plot_layer.line_join = 'bevel'\n",
     "            plot_layer.line_cap = 'round'\n",
-    "            plot_layer.move_to(self.scale_x(self.x[0]), self.scale_y(self.y[0]))\n",
-    "            for idx in range(1, n_points):\n",
-    "                plot_layer.line_to(\n",
-    "                    self.scale_x(self.x[idx]), self.scale_y(self.y[idx])\n",
-    "                )\n",
-    "\n",
-    "            plot_layer.stroke()\n",
-    "            plot_layer.close_path()\n",
+    "            \n",
+    "            plot_layer.stroke_lines(np.stack((self.scale_x(self.x), self.scale_y(self.y)), axis=1))\n",
     "\n",
     "            plot_layer.restore()"
    ]
@@ -451,7 +444,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "n = 1_000\n",
+    "n = 2_000\n",
     "x = np.linspace(0, 100, n)\n",
     "y = np.cumsum(np.random.randn(n))\n",
     "\n",

ipycanvas/canvas.py

@@ -30,6 +30,7 @@
     'putImageData': 31, 'clip': 32, 'save': 33, 'restore': 34, 'translate': 35,
     'rotate': 36, 'scale': 37, 'transform': 38, 'setTransform': 39, 'resetTransform': 40,
     'set': 41, 'clear': 42, 'sleep': 43, 'fillPolygon': 44, 'strokePolygon': 45,
+    'strokeLines': 46,
 }
 
 
@@ -575,6 +576,15 @@ def stroke_line(self, x1, y1, x2, y2):
         """Draw a line from ``(x1, y1)`` to ``(x2, y2)``."""
         self._send_canvas_command(COMMANDS['strokeLine'], [x1, y1, x2, y2])
 
+    def stroke_lines(self, points):
+        """Draw a path of consecutive lines from a list of points ``[(x1, y1), (x2, y2), ..., (xn, yn)]``."""
+        args = []
+        buffers = []
+
+        populate_args(points, args, buffers)
+
+        self._send_canvas_command(COMMANDS['strokeLines'], args, buffers)
+
     # Paths methods
     def begin_path(self):
         """Call this method when you want to create a new path."""

src/widget.ts

@@ -70,6 +70,7 @@ const COMMANDS = [
   'putImageData', 'clip', 'save', 'restore', 'translate',
   'rotate', 'scale', 'transform', 'setTransform', 'resetTransform',
   'set', 'clear', 'sleep', 'fillPolygon', 'strokePolygon',
+  'strokeLines',
 ];
 
 
@@ -361,6 +362,9 @@ class CanvasModel extends DOMWidgetModel {
       case 'strokeLine':
         this.strokeLine(args, buffers);
         break;
+      case 'strokeLines':
+        this.strokeLines(args, buffers);
+        break;
       case 'fillPolygon':
         this.fillPolygon(args, buffers);
         break;
@@ -500,6 +504,20 @@ class CanvasModel extends DOMWidgetModel {
     this.ctx.closePath();
   }
 
+  protected strokeLines(args: any[], buffers: any) {
+    this.ctx.beginPath();
+    const points = getArg(args[0], buffers);
+
+    // Move to the first point, then create lines between points
+    this.ctx.moveTo(points.getItem(0), points.getItem(1));
+    for (let idx = 2; idx < points.length; idx += 2) {
+      this.ctx.lineTo(points.getItem(idx), points.getItem(idx + 1));
+    }
+
+    this.ctx.stroke();
+    this.ctx.closePath();
+  }
+
   protected fillPolygon(args: any[], buffers: any) {
     this.ctx.beginPath();
     const points = getArg(args[0], buffers);
@@ -674,6 +692,17 @@ class RoughCanvasModel extends CanvasModel {
     this.roughCanvas.line(args[0], args[1], args[2], args[3], this.getRoughStrokeStyle());
   }
 
+  protected strokeLines(args: any[], buffers: any) {
+    const points = getArg(args[0], buffers);
+
+    const polygon: [number, number][] = [];
+    for (let idx = 0; idx < points.length; idx += 2) {
+      polygon.push([points.getItem(idx), points.getItem(idx + 1)]);
+    }
+
+    this.roughCanvas.linearPath(polygon, this.getRoughStrokeStyle());
+  }
+
   protected async fillPath(args: any[], buffers: any) {
     const [serializedPath] = args;