Merge pull request #40 from martinRenou/arc_methods

Arc methods

Author: martinRenou

docs/source/drawing_shapes.rst

@@ -66,6 +66,34 @@ You can also clear a certain canvas rectangle area:
 
 .. image:: images/rects.png
 
+Drawing circles
+---------------
+
+There are four methods that draw circles on the canvas:
+
+- ``fill_arc(x, y, radius, start_angle, end_angle, anticlockwise=False)``: Draw a filled arc centered at ``(x, y)`` with a radius of ``radius``.
+- ``stroke_arc(x, y, radius, start_angle, end_angle, anticlockwise=False)``: Draw an arc outline centered at ``(x, y)`` with a radius of ``radius``.
+- ``fill_arcs(x, y, radius, start_angle, end_angle, anticlockwise=False)``: Draw filled arcs centered at ``(x, y)`` with a radius of ``radius``. Where ``x``, ``y``, ``radius`` and other arguments are NumPy arrays, lists or scalar values.
+- ``stroke_arcs(x, y, radius, start_angle, end_angle, anticlockwise=False)``: Draw an arc outlines centered at ``(x, y)`` with a radius of ``radius``. Where ``x``, ``y``, ``radius`` and other arguments are NumPy arrays, lists or scalar values.
+
+.. code:: Python
+
+    from math import pi
+
+    from ipycanvas import Canvas
+
+    canvas = Canvas(size=(200, 200))
+
+    canvas.fill_style = 'red'
+    canvas.stroke_style = 'blue'
+
+    canvas.fill_arc(60, 60, 50, 0, pi)
+    canvas.stroke_arc(60, 60, 40, 0, 2 * pi)
+
+    canvas
+
+.. image:: images/arc.png
+
 Drawing paths
 -------------
 

docs/source/images/arc.png

@@ -131,20 +131,14 @@
     "        canvas.stroke_style = stroke_color\n",
     "\n",
     "        for idx in range(n_marks):\n",
-    "            canvas.begin_path()\n",
-    "\n",
     "            canvas.fill_style = colormap(color[idx])\n",
+    "            \n",
+    "            mark_x = scale_x(x[idx])\n",
+    "            mark_y = scale_y(y[idx])\n",
+    "            mark_size = size[idx]\n",
     "\n",
-    "            canvas.arc(\n",
-    "                scale_x(x[idx]), scale_y(y[idx]),\n",
-    "                size[idx],\n",
-    "                0, 2 * pi\n",
-    "            )\n",
-    "\n",
-    "            canvas.fill()\n",
-    "            canvas.stroke()\n",
-    "\n",
-    "            canvas.close_path()\n",
+    "            canvas.fill_arc(mark_x, mark_y, mark_size, 0, 2 * pi)\n",
+    "            canvas.stroke_arc(mark_x, mark_y, mark_size, 0, 2 * pi)\n",
     "\n",
     "        canvas.restore()\n",
     "\n",
@@ -246,7 +240,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "n_points = 500"
+    "n_points = 1_000"
    ]
   },
   {

examples/plotting.ipynb

@@ -164,6 +164,49 @@ def clear_rect(self, x, y, width, height=None):
 
         self._send_canvas_command('clearRect', (x, y, width, height))
 
+    # Arc methods
+    def fill_arc(self, x, y, radius, start_angle, end_angle, anticlockwise=False):
+        """Draw a filled arc centered at ``(x, y)`` with a radius of ``radius``."""
+        self._send_canvas_command('fillArc', (x, y, radius, start_angle, end_angle, anticlockwise))
+
+    def stroke_arc(self, x, y, radius, start_angle, end_angle, anticlockwise=False):
+        """Draw an arc outline centered at ``(x, y)`` with a radius of ``radius``."""
+        self._send_canvas_command('strokeArc', (x, y, radius, start_angle, end_angle, anticlockwise))
+
+    def fill_arcs(self, x, y, radius, start_angle, end_angle, anticlockwise=False):
+        """Draw filled arcs centered at ``(x, y)`` with a radius of ``radius``.
+
+        Where ``x``, ``y``, ``radius`` and other arguments are NumPy arrays, lists or scalar values.
+        """
+        args = []
+        buffers = []
+
+        populate_args(x, args, buffers)
+        populate_args(y, args, buffers)
+        populate_args(radius, args, buffers)
+        populate_args(start_angle, args, buffers)
+        populate_args(end_angle, args, buffers)
+        args.append(anticlockwise)
+
+        self._send_canvas_command('fillArcs', args, buffers)
+
+    def stroke_arcs(self, x, y, radius, start_angle, end_angle, anticlockwise=False):
+        """Draw an arc outlines centered at ``(x, y)`` with a radius of ``radius``.
+
+        Where ``x``, ``y``, ``radius`` and other arguments are NumPy arrays, lists or scalar values.
+        """
+        args = []
+        buffers = []
+
+        populate_args(x, args, buffers)
+        populate_args(y, args, buffers)
+        populate_args(radius, args, buffers)
+        populate_args(start_angle, args, buffers)
+        populate_args(end_angle, args, buffers)
+        args.append(anticlockwise)
+
+        self._send_canvas_command('strokeArcs', args, buffers)
+
     # Paths methods
     def begin_path(self):
         """Call this method when you want to create a new path."""

ipycanvas/canvas.py

@@ -86,6 +86,18 @@ class CanvasModel extends DOMWidgetModel {
       case 'strokeRects':
         this.drawRects(command.args, buffers, 'strokeRect');
         break;
+      case 'fillArc':
+        this.fillArc(command.args, buffers);
+        break;
+      case 'strokeArc':
+        this.strokeArc(command.args, buffers);
+        break;
+      case 'fillArcs':
+        this.drawArcs(command.args, buffers, 'fill');
+        break;
+      case 'strokeArcs':
+        this.drawArcs(command.args, buffers, 'stroke');
+        break;
       case 'set':
         this.setAttr(command.attr, command.value);
         break;
@@ -116,6 +128,58 @@ class CanvasModel extends DOMWidgetModel {
     this.ctx.drawImage(offscreenCanvas, dx, dy);
   }
 
+  private fillArc(args: any[], buffers: any) {
+    this.ctx.save();
+
+    this.ctx.beginPath();
+    this.executeCommand('arc', args);
+    this.ctx.closePath();
+
+    this.ctx.fill();
+    this.ctx.restore();
+  }
+
+  private strokeArc(args: any[], buffers: any) {
+    this.ctx.save();
+
+    this.ctx.beginPath();
+    this.executeCommand('arc', args);
+    this.ctx.closePath();
+
+    this.ctx.stroke();
+    this.ctx.restore();
+  }
+
+  private drawArcs(args: any[], buffers: any, commandName: string) {
+    const x = getArg(args[0], buffers);
+    const y = getArg(args[1], buffers);
+    const radius = getArg(args[2], buffers);
+    const startAngle = getArg(args[3], buffers);
+    const endAngle = getArg(args[4], buffers);
+    const anticlockwise = getArg(args[5], buffers);
+
+    const numberArcs = Math.min(
+      x.length, y.length, radius.length,
+      startAngle.length, endAngle.length
+    );
+
+    this.ctx.save();
+
+    for (let idx = 0; idx < numberArcs; ++idx) {
+      this.ctx.beginPath();
+      this.ctx.arc(
+        x.getItem(idx), y.getItem(idx), radius.getItem(idx),
+        startAngle.getItem(idx), endAngle.getItem(idx),
+        anticlockwise.getItem(idx)
+      );
+      this.ctx.closePath();
+
+      this.executeCommand(commandName);
+    }
+
+    this.ctx.restore();
+  }
+
   private drawRects(args: any[], buffers: any, commandName: string) {
     const x = getArg(args[0], buffers);
     const y = getArg(args[1], buffers);
@@ -140,7 +204,7 @@ class CanvasModel extends DOMWidgetModel {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
 
-  private executeCommand(name: string, args: any[]) {
+  private executeCommand(name: string, args: any[] = []) {
     (this.ctx as any)[name](...args);
   }