search

crisbeto / angular-svg-round-progressbar

Angular module that uses SVG to create a circular progressbar
https://crisbeto.github.io/angular-svg-round-progressbar/
MIT License
741 stars 174 forks source link

Is it possible to achieve more of a horseshoe shape? #84

Closed remib closed 8 years ago

remib commented 8 years ago

Hi, I'd like to edit the shape to be more horseshoe shape, so in-between full and semi-circle. I'd like the same behaviour of the semi circle, so the progress originates from one end but with a longer track that almost makes a full circle with a gap at the bottom. Is this possible?

I've had a go at this myself but can't quite find the right part of the code to edit to achieve what I want.

Thanks

crisbeto commented 8 years ago

That'll complicate the math quite a bit, but if you want to give it a go, these are the 2 places you need to look:

  1. This is the background circle element. If you're not using a background, you can skip it.
  2. This is the method that is being called when redrawing the "current" value. This is where the shape is being defined and where you'll need to do most of your changes.

I'll close the issue since it doesn't make sense to have something like this within the module itself, but we can continue discussing here if you need any more info.

remib commented 8 years ago

Ok so looks a lot more complicated than I had anticipated. Maths is not my forte so I'll leave it for now. I'm currently just creating basic UI so may revisit this once I hand over to one of our other developers. Thanks.