A modern programming language that makes developers happier.

kotlinlang

[Solved] : I am trying to draw speedometer using canvas. I have different segments where the range changes for each of them. More details in the thread

Speedo.png

As seen in the image i want the curved part for the red segment and green. Is there any way to draw this. The range of each segment can also vary. I am able to create similar one using draw rect but stroke is Rounded cap. It's not exactly like design. Any suggestion of how to achieve this? drawing paths?

SpeedoImpl.png

I used drawArc to draw the segments and ended up with

```drawArc(
    Color.Gray,
    startArcAngle,
    arcDegrees,
    false,
    topLeft = quarterOffset,
    size = centerArcSize,
    style =  Stroke(80f, 0f, StrokeCap.Round)
)


drawArc(
    Color.Red,
    startArcAngle,
    25 * (arcDegrees) / 100f,
    false,
    topLeft = quarterOffset,
    size = centerArcSize,
    style = Stroke(80f, 0f, StrokeCap.Round)
)


drawArc(
    Color.Green,
    startArcAngle + 45 ,
    25 * (arcDegrees) / 100f,
    false,
    topLeft = quarterOffset,
    size = centerArcSize,
    style = centerArcStroke
)

drawArc(
    Color.Blue,
    startArcAngle + 90 ,
    25 * (arcDegrees) / 100f,
    false,
    topLeft = quarterOffset,
    size = centerArcSize,
    style = centerArcStroke
)```
drawArc code i cannot customize the red segment bottom part. It has rounded curve and a flat line.

Found this thread. I guess we need to use path instead of drawArc. <https://kotlinlang.slack.com/archives/CJLTWPH7S/p1676090859282999?thread_ts=1676048791.882859&amp;cid=CJLTWPH7S>

Screenshot 2024-04-12 at 8.01.40 AM.png

Bit of tweaking here and there. This is not yet production ready needs some tweaking and cleaning. But the idea was taken from the thread linked above.

IMG-20240420-WA0003.jpg

Ended up exactly like in design. Using path and arcs works! Code in thread above helped achieve this