本篇只描述圓形圖像的兩種實現方式,動態陰影邊框如下:
【Qt】QLabel之動態陰影邊框
目前實現的效果如下:
左右兩邊實現的方式不同:
右邊比較簡單
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;
代碼:
鏈接: https://pan.baidu.com/s/1X5o4C283lA2tjcGmqS9Mgg 密碼: ned3