包含像素图的QLabel的圆角 [英] Rounded corners of a QLabel containing a pixmap

问题描述

我正在尝试在QT表单上的QLabel中显示图像.我需要该标签的左上角和右上角仅是圆角的，而底部2保持矩形.

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.

使用样式表，我给border-radius一个值，它起作用了.但是，该标签内的图像仍为矩形.(图像的一角隐藏在QLabel的圆角上).

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

四处搜寻，我发现为图像(像素图)设置遮罩并在其上绘制RoundRect会导致拐角为圆形.

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);

这就是我使QLabel左上角和右上角圆形的方式

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);

推荐答案

您带着面具的想法还不错.您只需要对蒙版进行一些合成绘图，例如

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);

这篇关于包含像素图的QLabel的圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！