bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

Changing from circular to elliptical base #123

Open educhielle opened 7 years ago

educhielle commented 7 years ago

I am using a semicircle (see Fig. 1), but I am concern about the gauge's height. I would like to make it flatter, so I was thinking of replacing the equation of a circle by an equation of an ellipse when drawing the gauge. Any ideas on how I could do that?

image Fig. 1

kplindegaard commented 7 years ago

It might be tricky for a couple of reasons, but it's a cool exercise. :)

  1. Think carefully about how you want to represent the ellipsis. Make sure it works for all options.angle and not just the half circle in your sketch.
  2. Today the radius is constant and there is a mapping from value to degrees/radians. What you have to do is to replace that with a function that so e.g. the pointer length depends on the angle/value.
  3. Drawing the sector band is more difficult, I think. Not sure... I'm not an expert in basic canvas operations, You need to figure out how to draw elliptical arcs instead of circular arcs.

Figure that out, and you are good to go.