From aaebd04e71409c39f4b5334a27b1c98272fcd42b Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Mon, 11 Nov 2013 20:22:41 -0800 Subject: [PATCH 1/9] Allow for setting an offset for the start angle. --- index.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 859283c..a56a3c2 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,7 @@ function Pie(selector) { this.borderColor = style(selector, 'border-color'); this.color = style(selector, 'color'); this.size(16); + this.angleOffset(0); } /** @@ -56,6 +57,18 @@ 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; +}; + /** * Draw on to `ctx`. * @@ -90,7 +103,7 @@ Pie.prototype.draw = function(ctx){ // pie ctx.beginPath(); ctx.moveTo(half, half); - ctx.arc(half, half, half - this.borderWidth, 0, pi * n, false); + ctx.arc(half, half, half - this.borderWidth, 0 + this._angleOffset, ( pi * n ) + this._angleOffset, false); ctx.fillStyle = this.color; ctx.fill(); From 272b5dc240ffc1aa62dc0f1f80bb1530189c1c2d Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Mon, 11 Nov 2013 20:26:16 -0800 Subject: [PATCH 2/9] Update documentation. --- Readme.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Readme.md b/Readme.md index bcac93d..c31bff8 100644 --- a/Readme.md +++ b/Readme.md @@ -40,6 +40,14 @@ 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#draw(ctx) Draw on `ctx`. From 6191d26f2b99f235f8c3174fd240aa1ead226c63 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:25:25 -0800 Subject: [PATCH 3/9] Add ability to set inner radius. --- Readme.md | 12 ++++++++++++ example_images/inner_radius.png | Bin 0 -> 3985 bytes index.js | 30 ++++++++++++++++++++++++++---- 3 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 example_images/inner_radius.png diff --git a/Readme.md b/Readme.md index c31bff8..6e6dad2 100644 --- a/Readme.md +++ b/Readme.md @@ -48,6 +48,18 @@ 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 +``` + +Looks like: + + ![Inner Radius Example](/example_images/inner_radius.jpg "Inner Radius Example") + ### 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 0000000000000000000000000000000000000000..91bf528bc669df20deb04fac3e889eef2ff3aedd GIT binary patch literal 3985 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 0 ? ( lineWidth / 2 ) : 0 ), 0 + this._angleOffset, ( pi * n ) + this._angleOffset, false); + if ( this._innerRadius > 0 ) + { + ctx.lineWidth = lineWidth; + ctx.strokeStyle = this.color; + ctx.stroke(); + } + else + { + ctx.fillStyle = this.color; + ctx.fill(); + } return this; }; From 8eb7d0f9004836d6c4df3e993d7ed489bc531b01 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:27:11 -0800 Subject: [PATCH 4/9] Fix image. --- Readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Readme.md b/Readme.md index 6e6dad2..474a930 100644 --- a/Readme.md +++ b/Readme.md @@ -56,9 +56,9 @@ pie.innerRadius( 10 ); // set a 10px inner radius ``` -Looks like: + Example image: - ![Inner Radius Example](/example_images/inner_radius.jpg "Inner Radius Example") + ![Inner Radius Example](example_images/inner_radius.jpg?raw=true "Inner Radius Example") ### Pie#draw(ctx) From 2e796bcf203b375c58f486e561de62584e38934e Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:29:29 -0800 Subject: [PATCH 5/9] Another attempt to work with inline relative images. --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 474a930..5c4dc78 100644 --- a/Readme.md +++ b/Readme.md @@ -58,7 +58,7 @@ Example image: - ![Inner Radius Example](example_images/inner_radius.jpg?raw=true "Inner Radius Example") + ![Inner Radius Example](example_images/inner_radius.jpg?raw=true) ### Pie#draw(ctx) From 8605282dca3cf01375c988638ca99a6282ebcdd7 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:30:13 -0800 Subject: [PATCH 6/9] No indenting? --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 5c4dc78..293e4ac 100644 --- a/Readme.md +++ b/Readme.md @@ -58,7 +58,7 @@ Example image: - ![Inner Radius Example](example_images/inner_radius.jpg?raw=true) + ![Inner Radius Example](example_images/inner_radius.jpg?raw=true) ### Pie#draw(ctx) From 77be0a27c75afd2b1fbca54a713132534ad6ff93 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:30:56 -0800 Subject: [PATCH 7/9] Would have helped if I had the right filename. --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 293e4ac..08ec35a 100644 --- a/Readme.md +++ b/Readme.md @@ -58,7 +58,7 @@ Example image: - ![Inner Radius Example](example_images/inner_radius.jpg?raw=true) + ![Inner Radius Example](example_images/inner_radius.png?raw=true) ### Pie#draw(ctx) From 998016156295fefffed2f54ee7b924ee67d714e1 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:34:10 -0800 Subject: [PATCH 8/9] Use a bigger image. --- example_images/inner_radius.png | Bin 3985 -> 4709 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/example_images/inner_radius.png b/example_images/inner_radius.png index 91bf528bc669df20deb04fac3e889eef2ff3aedd..9790100be910ca6ddaac3d1eff63024204f1d7c1 100644 GIT binary patch delta 1554 zcmV+t2JQKgALS$=iBL{Q4GJ0x0000DNk~Le0000w0000t2m$~A0MbX!p|K(K3j{Sd zJTHd&nn{QpWfXwzuIhc69!6(rLCG=+ zF_8%hQ6UN#x1KDwsM9um1kudtbeJ_5ZJ4O|0AN-gfI8fAL!fbwH{PkK5^V znvLe*Z?lQDUa!|~w-J)bWIR3yM>?HWRW+R%{2kI=EO0Wwv{T>V*xlXL$TXT*ET$;R zpR>o5i791#3O@DljIw8cZ~9QOG@9keWtkt0I|wd;Twh;rHCuR1BodY}1J?|cdhlWO z$kEu*W9hr@9vd68e^fMUi6j1S0j*Rj^;(_#%OM()WJ_FaPAr$t%$QvY>DHp zxY}fO?{xajcSokmrO}e8ZYR4hWIX9>YireNwOA~AWVLf%jKbcA-#kP!9d4`ofv5l@(muS+>SyePzvJ z9f&Aj?P$p3f9Az`T-znFH7*KlSD~*1c9h~cYejeIYj#a>P?s%m2`$Bd^QNWiMkAApgxIzpZ}xX@93K zj(d?)4;;^)yI8)nEKW8=m+Yq24vQ5x%4E5C>h$D?pCtB9i(b9Rt)DKpE1S{-XTaqh zCX`H&Xn?+B@uL95@oQH>60I3<;43 zAN+90 z@1PhhXPNpz+9?dU&dUFXUk$jdxKi*#M{F-&^KMh!vtL?RZz?XE9J{M`+<2~_wXJj& z1Fk+Ak-&yLq-6tcGL@7zy&V&rX)o0>}f2*trk`d)@uU1`qd)`+j zKuPYZilJ#~z~xe;g+siuz%s1=%)h$(yN`!V^VK_W5A90PuK|~pflWB{e4t=Z{nx$} zkTh6b9yP9p8dAKVP~_1w=lxdev{t3iLSl$6=QKg0$cI5iwy@~^%Gs-9#~(9yWMtey ze?K&xYBU<&O?#Y~*mrQ`3Ll(b49C>vqHcKe`)>FZ>cpdKl8nyI8vl(u1^h7Ac<*2m<{GG zygyPdJAA6J#l;q%W!UG;y$Q3M03%}y@|$Mv^>f)nM{w$3%?TGZa)^A0g808AeorTZ zHTmcXyOhRxeC&^`lF1JU{&{)L%)#nR4l8Odir?fNLzXspw$ zrtLROQzk>I$xIbud9i{6{o&*Jq-D?wq> zZuH;M1& delta 824 zcmV-81IPU3B#|E>iBL{Q4GJ0x0000DNk~Le0000X0000X2m$~A0N93AII$u03j{MW zJTH%E(fu4xng#9=KE&e%)B|l5B#xXe#B$OKZ5@k9EHq0f*`Ohf7|?Rdah?#R%owj zT0t)8MP1cYQOpQb;Mb#f(Cc=)k|Y)WKE0LY-s-Y)u_c{qh!>jT)YVF*QYx1?u@23{ z^Su4NeI#KRMlw?8>-rdeZ`P#RMDS>#-)vQDRfLhsl%A&JINLwB;gd>0f&9H4^V$62 zi|4S17yT5;DICaPe|KlMSS+fl8rks$>%%*zvj{KvCM{Dqa6~AnEXzr2j>i7{(Ov4m zH)#{+K#@^{{25ThqiiQ-TWSW`2?Iu1A*bdpbhK4$Va_2Rk}Y{d-+yqb@Im~;_} zdaP@hJTQ8xgPH__Cg}e%-@i?Mk|)n9ibC}ahg6XAa~!KCC%9CfP1~N3_0VS=#zHiwt|}`u@jj*LThX^45RD1kuygy zW@g8yufssSa!qc}!#8Q1zRxkJSU70qJeNG0xVyG0ddv8N_P+!-zaR*M!2s=tAn-uQ{9ls60VYI>eSqs4w<*pLuZS9F zfo& From a8fc79bd48e7708e1816e9c6f39308270d1f7a82 Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 12 Nov 2013 01:39:26 -0800 Subject: [PATCH 9/9] Fix an issue introduced by inner radius when drawing normally. --- index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 6f02ff0..bc1aee8 100644 --- a/index.js +++ b/index.js @@ -115,16 +115,18 @@ Pie.prototype.draw = function(ctx){ // pie ctx.beginPath(); - var lineWidth = half - this.borderWidth - this._innerRadius; - ctx.arc(half, half, half - this.borderWidth - ( this._innerRadius > 0 ? ( lineWidth / 2 ) : 0 ), 0 + this._angleOffset, ( pi * n ) + this._angleOffset, false); 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(); }