Drawing rounded corners

When drawing rounded corners by using drawRoundedRectangle() the corners always look as if the linethickness is bigger than the rest of the rectangle. See example:

image LineThickness = 1.0

image LineThickness = 2.0

I can workaround this by overlaying 2 rounded rectangles using fillRoundedRectangle() and making the one in front smaller to simulate the line. See example:

image Rectangle in front reduced by 1.0

I can live with this workaround but i am just curious why this is happening and why the current implementation of drawRoundedRectangle() is using a path stroke?

You need to inset the rectangle by 0.5f.

It looks like the corner is thicker but that’s because the regular stroke is drawn spread out over 2 pixels because the coordinates fall exactly in between these two pixels (and one of these pixels gets clipped off because it falls outside of the bounds).

By doing an inset of 0.5f (or really of lineThickness * 0.5f), it puts the line on the center of the pixel and the stroke will draw correctly.

Most of JUCE’s line drawing commands require this. Fills don’t.

3 Likes

Working! Thanks, wasn’t aware of that :smiley: