PDA

View Full Version : Rouding corners of a QPixmap



superpacko
18th November 2011, 20:43
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:


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...


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!

Oleg
18th November 2011, 21:33
What about style sheets?


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

superpacko
18th November 2011, 21:46
in order to use an image as the content of the QLabel im doing:


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.

Oleg
18th November 2011, 22:48
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);
}

d_stranz
18th November 2011, 22:58
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.

superpacko
21st November 2011, 15:43
Thanks Oleg! it worked great, i didnt know i could use an image as a brush. Nice solution!