Rouding corners of a QPixmap

Hey there!

Im building a QGridLayout that will display images (loaded from id3Tags) in each cell. Right now im using QLabels or QWidgets to wrap the image in a QPixmap.
The problem that i have is that the images are rectangles and i want them to be displayed with nice and smooth rounded corners.
How could i accomplish that?

I've tried creating a custom widget that would paint a rounded rectangle and then paint a pixmap, but the pixmap doesnt get rounded.
Then i found that i can set a mask on the pixmap, so i think i could set a mask with rounded corners, but dont know how to do that rounded qbitmap.

what i tried:

Code:

---

void RoundedCover::paintEvent(QPaintEvent *)
{
    QRectF rect(0,0,150,150);
 
    QPainter painter(this);
    painter.drawPixmap(0,0, _pixmap);
    painter.setRenderHint(QPainter::TextAntialiasing);
    painter.setWorldMatrixEnabled(false);
    painter.setPen(QPen( QBrush(QColor("darkgrey"), Qt::SolidPattern), 2.0)); 
    painter.drawRoundedRect(rect, 20.0, 15.0);
}

---

I thought about something like...

Code:

---

void RoundedCover::paintEvent(QPaintEvent *)
{
    QRectF rect(0,0,150,150);
 
    QPainter painter(this);
    _pixmap.setMask(....);//Something here to make it rounded
    painter.drawPixmap(0,0, _pixmap);
    painter.setRenderHint(QPainter::TextAntialiasing);
    painter.setWorldMatrixEnabled(false);
    painter.setPen(QPen( QBrush(QColor("darkgrey"), Qt::SolidPattern), 2.0)); 
    painter.drawRoundedRect(rect, 20.0, 15.0);
}

---

any ideas?
thanks!

What about style sheets?

Code:

---

QLabel#albumCover
{
    border-radius: 10px;
}

---

in order to use an image as the content of the QLabel im doing:

Code:

---

QLabel *cover2 = new QLabel();
QPixmap pix2("cover2.jpg");
pix2 = pix2.scaled(150, 150, Qt::IgnoreAspectRatio, Qt::SmoothTransformation);
cover2->setPixmap(pix2);
cover2->setStyleSheet("border:2px solid grey; border-radius: 10px;background-color: transparent;");

---

And when i do that, the label gets rounded but the image doesnt, so the corner are overlaped.

Code:

---

void CoverWidget::paintEvent(QPaintEvent *e)
{
    Q_UNUSED(e)
 
    QImage image("image.jpg");
    QBrush brush(image);
 
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(brush);
    painter.drawRoundedRect(0, 0, width(), height(), 5, 5);
}

---

Nice, Oleg.

I think that if the image is smaller than the rect, the brush will tile the image to fill it. So to make sure this doesn't happen, the paintEvent should probably check the size of the image. If it is smaller, then two rects should be drawn: the outer, rounded rect with a plain brush, then the smaller square-cornered rect centered inside with the cover image brush. (Or you could scale the image larger to fit).

Likewise, if the image is larger than the button, it could be scaled and then used to set the brush texture.

Thanks Oleg! it worked great, i didnt know i could use an image as a brush. Nice solution!