EYakoumi
EYakoumi

Reputation: 429

Rounded corners of a QLabel containing a pixmap

I am trying to display an Image inside a QLabel on QT forms. I need that label to have only the top left and right corners to be rounded while the bottom 2 remain rectangular.

using style sheets I gave the border-radius a value and it worked. Howerver, the image inside that label remained rectangular. (the corner of the image hid the circular corner of the QLabel).

Searching around, i found that setting a mask to the image (pixmap) and drawing a RoundRect on it cause the corners to be circular.

that worked but it made all four corners of the image to be circular.

is there a way to make only the top part as circular?

this is how i made the edges of the pixmap circular:

QBitmap map(100,100);     //my pixmap is 100x100
map.fill(Qt::color0);
QPainter painter( &map );
painter.setBrush(Qt::color1);
painter.drawRoundRect(0,0,100,100,20,20);
p.setMask(map);
ui->image1->setPixmap(p);

and this is how i made the QLabel top left and right corner circular

QString style = "border: 4px solid; \n";
style += "border-top-left-radius: 20px;\n";
style += "border-top-right-radius: 20px;";
ui->image1->setStyleSheet(style);

Upvotes: 0

Views: 3501

Answers (1)

ypnos
ypnos

Reputation: 52367

Your idea with the mask is not too bad. You just have to do some composite drawing to the mask, e.g.

QPainter painter(&map);
painter.setBrush(Qt::color1);
painter.drawRoundedRect(0, 0, 100, 40, 20, 20);
painter.drawRect(0, 20, 100, 100);
p.setMask(map);

Upvotes: 0

Related Questions