Draw gradient filled rectangle with rounded corners on one side


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.



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);
    g.setGradientFill ( /* ... */ );  // your job
    g.fillPath (p);

Not tested, good luck


Cheers Daniel, much appreciated.


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