Can this support semicircles or other arc angles?

[hmaidasani]

[kottenator]

It has no support for that right now.

But you may customize rendering function to draw any shape. Here are few examples of customization:

• thin "empty" circle
• "start dot"
• multiple circles
• triangle

However, it's not so easy to write a custom shape (especially if you need to support all the default settings)

[hmaidasani]

I meant something like this:

[kottenator]

Yes, I understand your idea. The answer is: it's possible to do, though not so easy. My lib is designed for circles only, not for other shapes. However, I may create a snippet for you (like I did before, for examples above). But I need time for this. Probably on the next week.

[juuliaans]

I don't know if @hmaidasani is still looking for this but i had to do a semi-circle as well, and i was able to override drawEmptyArc and drawArc and played a little with the math and got the semicircle working. Im gonna leave the code here just in cause is useful for anyone.
Thanks for this awesome library by the way @kottenator

Code for half-circle

               drawArc: function (v) {
                    var ctx = this.ctx,
                        r = this.radius,
                        t = this.getThickness(),
                        a = this.startAngle;

                    ctx.save();
                    ctx.beginPath();

                    if (!this.reverse) {
                        ctx.arc(r, r, r - t / 2, a, a + Math.PI * v);
                    } else {
                        ctx.arc(r, r, r - t / 2, a - Math.PI * v, a);
                    }

                    ctx.lineWidth = t;
                    ctx.lineCap = this.lineCap;
                    ctx.strokeStyle = this.arcFill;
                    ctx.stroke();
                    ctx.restore();
                },
                drawEmptyArc: function (v) {
                    var ctx = this.ctx,
                    r = this.radius,
                    t = this.getThickness(),
                    a = this.startAngle;

                    if (v < 1) {
                        ctx.save();
                        ctx.beginPath();

                        if (v <= 0) {
                            ctx.arc(r, r, r - t / 2, 0, Math.PI * 2);
                        } else {
                            if (!this.reverse) {
                                ctx.arc(r, r, r - t / 2, 0, a + Math.PI * v, a);
                            } else {
                                ctx.arc(r, r, r - t / 2, 0, a - Math.PI * v);
                            }
                        }

                        ctx.lineWidth = t;
                        ctx.strokeStyle = this.emptyFill;
                        ctx.stroke();
                        ctx.restore();
                    }
                },

[kottenator]

gterat work, @juliansantaana!
I have re-worked your code a bit and made a demo of arc layout.
I guess this task is resolved.

[juuliaans]

awesome @kottenator , introducing that new arcCoef attr is a great idea. Im gonna use your code since is obviusly more polished.
Are you thinking on merging this to the master?

[kottenator]

Unfortunately, I can't merge it into master because it's not a circle anymore, it's an arc.

I already have made demos for arc layout, triangle layout, "thin empty circle", "start point", embed circles - all of them are custom layouts, that are not so popular, so they should not be included into the "core".

I'm not sure what to do with it. Maybe some kind of plug-ins?

[SmashBrando]

May I suggest branching some of these out into separate plugins? I too needed a semi circle and this worked perfectly. Not many devs will go so far to make the solution and since it's pretty much 'the' solution, it would be cool to have these as little gist plugins or something.

I did add ctx.lineCap = this.lineCap; to drawEmptyArc so the caps of the empty arc also have the same cap style.

Thanks again!

[kottenator]

Yes, I'm thinking of plugin architecture - #111.