diff --git a/Readme.md b/Readme.md index bcac93d..08ec35a 100644 --- a/Readme.md +++ b/Readme.md @@ -40,6 +40,26 @@ Set the diameter to `n`. +### Pie#angleOffset(angleOffset) + + Set the start angle offset to `angleOffset`. This allows you to start the pie drawing at a position of your choosing. For instance, to start the pie drawing from 12 o'clock (as opposed to the default, 3 o'clock), you could: + +```javascript + pie.angleOffset( -Math.PI / 2 ); // add -90 degress to the default start angle of 3 o'clock +``` + +### Pie#innerRadius(r) + + Set the inner radius to `r`, allowing you to draw 'donut' style pie graphs. Eg: + +```javascript + pie.innerRadius( 10 ); // set a 10px inner radius +``` + + Example image: + + ![Inner Radius Example](example_images/inner_radius.png?raw=true) + ### Pie#draw(ctx) Draw on `ctx`. diff --git a/example_images/inner_radius.png b/example_images/inner_radius.png new file mode 100644 index 0000000..9790100 Binary files /dev/null and b/example_images/inner_radius.png differ diff --git a/index.js b/index.js index 859283c..bc1aee8 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,8 @@ function Pie(selector) { this.borderColor = style(selector, 'border-color'); this.color = style(selector, 'color'); this.size(16); + this.angleOffset(0); + this.innerRadius(0); } /** @@ -56,6 +58,30 @@ Pie.prototype.size = function(n){ return this; }; +/** + * Set the start angle offset to 'angleOffset' in *radians*. + * + * @param {Number} angleOffset + * @return {Pie} + * @api public + */ +Pie.prototype.angleOffset = function(angleOffset) { + this._angleOffset = angleOffset; + return this; +}; + +/** + * Set the inner radius to 'r', drawing a 'donut' shaped pie graph. + * + * @param {Number} r + * @return {Pie} + * @api public + */ +Pie.prototype.innerRadius = function(r) { + this._innerRadius = r; + return this; +}; + /** * Draw on to `ctx`. * @@ -89,10 +115,21 @@ Pie.prototype.draw = function(ctx){ // pie ctx.beginPath(); - ctx.moveTo(half, half); - ctx.arc(half, half, half - this.borderWidth, 0, pi * n, false); - ctx.fillStyle = this.color; - ctx.fill(); + if ( this._innerRadius > 0 ) + { + var lineWidth = half - this.borderWidth - this._innerRadius; + ctx.arc(half, half, half - this.borderWidth - ( lineWidth / 2 ), 0 + this._angleOffset, ( pi * n ) + this._angleOffset, false); + ctx.lineWidth = lineWidth; + ctx.strokeStyle = this.color; + ctx.stroke(); + } + else + { + ctx.moveTo(half,half); + ctx.arc(half, half, half - this.borderWidth, 0 + this._angleOffset, ( pi * n ) + this._angleOffset, false); + ctx.fillStyle = this.color; + ctx.fill(); + } return this; };