Draw gradient filled rectangle with rounded corners on one side


#1

Looking for tips on how to do this, please. If there was no gradient I would be able to just overlap a rounded and non-rounded rectangle.

Cheers.


#2

You can create a path, draw the rectangle combining lineTo and addArc.
Once you are done, use fillPath():

void paint (Graphics& g) override
{
    const float radius = 10.0f;
    const float x = 10.0f;   // example values
    const float y = 10.0f;
    const float w = 100.0f;
    const float h = 100.0f;

    Path p;
    p.startNewSubPath (x, y);
    p.lineTo (x + w - radius, y);
    p.addArc (x + w - radius, y, radius, radius, 0.0f, MathConstants<float>::halfPi);
    p.lineTo (x + w, y + h - radius);
    p.addArc (x + w - radius, y + h - radius, radius, radius, MathConstants<float>::halfPi, MathConstants<float>::pi);
    p.lineTo (x, y + h);
    p.closeSubPath();
    g.setGradientFill ( /* ... */ );  // your job
    g.fillPath (p);
}

Not tested, good luck


#3

Cheers Daniel, much appreciated.


#4

There’s also a method in Path that lets you specify which corners to round

https://docs.juce.com/master/classPath.html#ae99d7f45ea1ba9481a82d9e8ac3b76ab