extras/shapes.js

   1 /**
   2  * @license
   3  * Copyright 2011 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6
   7 /**
   8  * @fileoverview
   9  * Including this file will add several additional shapes to Dygraph.Circles
  10  * which can be passed to drawPointCallback.
  11  * See tests/custom-circles.html for usage.
  12  */
  13
  14 (function() {
  15
  16 /**
  17  * @param {!CanvasRenderingContext2D} ctx the canvas context
  18  * @param {number} sides the number of sides in the shape.
  19  * @param {number} radius the radius of the image.
  20  * @param {number} cx center x coordate
  21  * @param {number} cy center y coordinate
  22  * @param {number=} rotationRadians the shift of the initial angle, in radians.
  23  * @param {number=} delta the angle shift for each line. If missing, creates a
  24  *     regular polygon.
  25  */
  26 var regularShape = function(
  27     ctx, sides, radius, cx, cy, rotationRadians, delta) {
  28   rotationRadians = rotationRadians || 0;
  29   delta = delta || Math.PI * 2 / sides;
  30
  31   ctx.beginPath();
  32   var initialAngle = rotationRadians;
  33   var angle = initialAngle;
  34
  35   var computeCoordinates = function() {
  36     var x = cx + (Math.sin(angle) * radius);
  37     var y = cy + (-Math.cos(angle) * radius);
  38     return [x, y];
  39   };
  40
  41   var initialCoordinates = computeCoordinates();
  42   var x = initialCoordinates[0];
  43   var y = initialCoordinates[1];
  44   ctx.moveTo(x, y);
  45
  46   for (var idx = 0; idx < sides; idx++) {
  47     angle = (idx == sides - 1) ? initialAngle : (angle + delta);
  48     var coords = computeCoordinates();
  49     ctx.lineTo(coords[0], coords[1]);
  50   }
  51   ctx.fill();
  52   ctx.stroke();
  53 };
  54
  55 /**
  56  * TODO(danvk): be more specific on the return type.
  57  * @param {number} sides
  58  * @param {number=} rotationRadians
  59  * @param {number=} delta
  60  * @return {Function}
  61  * @private
  62  */
  63 var shapeFunction = function(sides, rotationRadians, delta) {
  64   return function(g, name, ctx, cx, cy, color, radius) {
  65     ctx.strokeStyle = color;
  66     ctx.fillStyle = "white";
  67     regularShape(ctx, sides, radius, cx, cy, rotationRadians, delta);
  68   };
  69 };
  70
  71 Dygraph.update(Dygraph.Circles, {
  72   TRIANGLE : shapeFunction(3),
  73   SQUARE : shapeFunction(4, Math.PI / 4),
  74   DIAMOND : shapeFunction(4),
  75   PENTAGON : shapeFunction(5),
  76   HEXAGON : shapeFunction(6),
  77   CIRCLE : function(g, name, ctx, cx, cy, color, radius) {
  78     ctx.beginPath();
  79     ctx.strokeStyle = color;
  80     ctx.fillStyle = "white";
  81     ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
  82     ctx.fill();
  83     ctx.stroke();
  84   },
  85   STAR : shapeFunction(5, 0, 4 * Math.PI / 5),
  86   PLUS : function(g, name, ctx, cx, cy, color, radius) {
  87     ctx.strokeStyle = color;
  88
  89     ctx.beginPath();
  90     ctx.moveTo(cx + radius, cy);
  91     ctx.lineTo(cx - radius, cy);
  92     ctx.closePath();
  93     ctx.stroke();
  94
  95     ctx.beginPath();
  96     ctx.moveTo(cx, cy + radius);
  97     ctx.lineTo(cx, cy - radius);
  98     ctx.closePath();
  99     ctx.stroke();
 100   },
 101   EX : function(g, name, ctx, cx, cy, color, radius) {
 102     ctx.strokeStyle = color;
 103
 104     ctx.beginPath();
 105     ctx.moveTo(cx + radius, cy + radius);
 106     ctx.lineTo(cx - radius, cy - radius);
 107     ctx.closePath();
 108     ctx.stroke();
 109
 110     ctx.beginPath();
 111     ctx.moveTo(cx + radius, cy - radius);
 112     ctx.lineTo(cx - radius, cy + radius);
 113     ctx.closePath();
 114     ctx.stroke();
 115   }
 116 });
 117
 118 })();