If anyone is looking for this still (like I did), I managed to get it working by simply starting the draw from 0 to the end angle which the default number from 0 is “2.51327” here is how the code looks like in my case to make it work like intended by OP:
//draw the value arcs
if (slider.isEnabled() && slider.getValue() > 0) {
Path valueArc;
valueArc.addCentredArc(centerX, centerY, knobRadius, knobRadius, 0.0f, 0, map(sliderPos, 0.5, 1.0, 0, 2.51327), true);
std::cout << sliderPos << std::endl;
g.setColour(valueFill);
g.strokePath(valueArc, PathStrokeType(lineThickness));
} else if (slider.isEnabled() && slider.getValue() < 0) {
Path valueArc2;
valueArc2.addCentredArc(centerX, centerY, knobRadius, knobRadius, 0.0f, 0, map(sliderPos, 0.5, 0.0, 0, -2.51327), true);
std::cout << sliderPos << std::endl;
g.setColour(valueFill);
g.strokePath(valueArc2, PathStrokeType(lineThickness));
}
Pay attention to this:
valueArc.addCentredArc(centerX, centerY, knobRadius, knobRadius, 0.0f, 0, map(sliderPos, 0.5, 1.0, 0, 2.51327), true);
this draws from centre to the right, whereas this:
valueArc2.addCentredArc(centerX, centerY, knobRadius, knobRadius, 0.0f, 0, map(sliderPos, 0.5, 0.0, 0, -2.51327), true);
draws from centre to left. It only has inverted end angle, just put a minus before it.
Hope this helps people!