roundedRectangle not uniform thickness


#1

I’ve got a TextButton with rounded corners via Path::addRoundedRectangle, but it doesn’t look right, especially using OpenGL on Android.

I’ve checked without OpenGL and it still has the same issue.
Is there anything I can look at to make it look more uniform?


#2

It’s getting clipped. Try drawing it so that it all lies inside the bounds of the component!


#3

I have a similar question/experience with roundedRectangle. Here is a picture of a RoundedRectangle being used in Logic Pro X:

Here is a roundedRectangle generated in Juce:

Here’s the code used:

class RoundedRect : public Component {
public:
    RoundedRect() {}
    ~RoundedRect() {}
    void paint( Graphics& g ) override {
        g.setColour(Colours::black);
        g.fillRoundedRectangle(getLocalBounds().toFloat().reduced(1), 10);
        g.setColour(Colours::green);
        g.fillRoundedRectangle(getLocalBounds().toFloat().reduced(2), 10);
    }
};

Any ideas what is with the pixelation in those juce corners compared to the Logic X version? I used Digital Color Meter to zoom in on the roundedRect corners.

If i use g.setImageResamplingQuality(juce::Graphics::ResamplingQuality::highResamplingQuality ); the juce version looks like this:


#4

Wait, I stand corrected!

It’s the difference between a Retina Display and a non-retina display. Here’s the JUCE version on a retina display:


#5

I haven’t tested, but that should be the way:

        auto area = getLocalBounds().toFloat().reduced (0.5f);
        float cornerSize = 10.f;
        g.setColour (Colours::green);
        g.fillRoundedRectangle (area, cornerSize);
        g.setColour (Colours::black);
        g.drawRoundedRectangle (area, cornerSize, 1.f); 

see this post more details about why the 0.5 offset is needed (sometimes) Rectangles and lineThickness