Drawing an image with QLinearGradient is low quality

[Leon]

Hi!

I am trying to create an image that fades from one color to another.

    QImage image(width, height, QImage::Format_RGB32);

    QPen pen;
    pen.setWidth(0);

    QLinearGradient gradient;
    gradient.setStart(0, height/2);
    gradient.setFinalStop(width, height / 2);
    gradient.setColorAt(0, QColor("green"));
    gradient.setColorAt(1, QColor("blue"));

    QPainter painter;
    painter.begin(&image);
    //painter.setCompositionMode(QPainter::CompositionMode_Source);
    //painter.setRenderHint(QPainter::SmoothPixmapTransform);
    painter.setBrush(gradient);
    painter.setPen(pen);
    painter.drawRect(0, 0, width, height);
    painter.drawImage(QRect(0, 0, width, height), image);
    image.save("color.png", 0, 100);

Result:

I have 2 problems:

• The first row and column of the image is black. Which is an easy fix but makes me wonder whether there is something wrong in my code

painter.drawRect(-1, -1, width+1, height+1);

• Quality is not the best. Vertical lines are easily visible (zooming on the image). I have tried to change different settings on the painter with no luck. Where should i be looking to fix this problem? Could it even be on QImage::save()? Problem persists with much higher resolutions..

[mrjj]

@Leon

Hi
1)
If you mean the black pen around the rect, you can get rid of that by

..
painter.setPen(Qt::NoPen); // was painter.setPen(pen); 
..

Your Quality issues are harder to fix. Often in photoshop and similar apps, you apply a small noise or blur to the image to hide the banding.

they talk about it here. its a common issue.
https://www.svgator.com/blog/color-banding-gradient-animation/

[Leon]

@mrjj

Sorry for late answer.

A lot of helpful information on that article. Thank you!