1. 程式人生 > >【Qt】QLabel實現的圓形圖像

【Qt】QLabel實現的圓形圖像

不同 地址 ide qpixmap wro mask 描述 qpainter col

本篇只描述圓形圖像的兩種實現方式,動態陰影邊框如下:

目前實現的效果如下:

技術分享圖片

左右兩邊實現的方式不同:

右邊比較簡單

 min-width:  100px;
    max-width:  100px;
    min-height: 100px;
    max-height: 100px;

    border-radius: 50px;
    border-width: 0 0 0 0;
    border-image: url(H:/Qt Project/UIDesignTest/Heben.jpg) 0 0 0 0 stretch strectch;

但是這種方法的弊端是只能傳入圖片地址,如果需要使用Mat,或者QPixMap,或者QImage存儲的圖片該怎麽辦?

下面介紹左邊的圖片實現方式:

QPixmap MainWindow::PixmapToRound(const QPixmap &src, int radius)
{
    if (src.isNull()) {
        return QPixmap();
    }
    QSize size(2*radius, 2*radius);
    QBitmap mask(size);
    QPainter painter(&mask);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);
    painter.fillRect(
0, 0, size.width(), size.height(), Qt::white); painter.setBrush(QColor(0, 0, 0)); painter.drawRoundedRect(0, 0, size.width(), size.height(), 99, 99); QPixmap image = src.scaled(size); image.setMask(mask); return image; }

調用方式如下:

QPixmap img1;
    img1.load("H:\\Qt Project\\UIDesignTest\\hebern.jpg
"); //100,100為QLabel的寬高 QPixmap pixMap= img1.scaled(100,100, Qt::IgnoreAspectRatio, Qt::SmoothTransformation); //50為圓形的半徑 pixMap = PixmapToRound(pixMap, 50); ui->lblIdentityImg->setPixmap(pixMap);

這樣實現如果不需要陰影邊框的時候完全沒問題,但是加了特效邊框的效果如下:

技術分享圖片

還是會呈現方形邊框,Gif圖片還有圓框,實際看到的全部是方框

要想實現圖1的效果,還是得需要設置QLabel的StyleSheet, 只是會少一行border-image.如下:

 min-width:  100px;
    max-width:  100px;
    min-height: 100px;
    max-height: 100px;

    border-radius: 50px;
    border-width: 0 0 0 0;

【Qt】QLabel實現的圓形圖像