PyQt自定義控件之實現圓形圖片

對於圓形圖片來說,我們可以使用 qss樣式表border-radius 來實現控件(如: QLable)的圓形效果,但這種方式會出現邊界鋸齒模糊的問題。爲了解決這種問題,我們可以直接重寫控件 paintEvent 事件。

下面以 QLabel 來舉例實現:

class CircleImage(QLabel):
    '''繪製圓圖片'''

    def __init__(self, parent, width, height):
        super(CircleImage, self).__init__(parent)
        self.resize(width, height)
        self.circle_image = None

    def set_image(self, image):
        '''設置繪製的圖片'''
        self.circle_image = image.scaled(self.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation)
        self.update()

    def paintEvent(self, event):
        '''重寫繪製事件'''
        super(CircleImage, self).paintEvent(event)
        painter = QPainter(self)
        painter.setPen(Qt.NoPen)
        brush = QBrush(self.circle_image)
        painter.setBrush(brush)
        painter.setRenderHints(QPainter.Antialiasing, True)
        painter.drawEllipse(QRect(0, 0, self.width(), self.height()))

當然,也可以使用QWidget來實現,效果都一樣,因爲QLabel就是繼承於QWidget的。

這裏的實現思路有兩個比較重要的方法:set_imagepaintEvent

set_image 裏面用於設置需要顯示的圖片,並且對圖片進行了縮放,縮放的兩個參數爲:
Qt.KeepAspectRatio:這是用於設置縮放圖片時保持比例
Qt.SmoothTransformation:這是用於設置圖片轉換過程中避免失真

設置完後調用update()方法來重新調用paintEvent()方法:
1、設置painter 的pen爲Qt.NoPen來去除邊框線條
2、把需要繪製的圖片傳送給QBrush,刷子就是繪製圖片的內容,然後把brush設置給painter
3、設置painter的renderHints爲QPainter.Antialiasing來實現抗鋸齒功能
4、最後通過painter的drawEllipse來實現圓形圖片繪製


下面是調用該控件的窗口

class MyWidget(QWidget):
    def __init__(self):
        super(MyWidget, self).__init__()
        
        # 窗口設置
        self.resize(320, 240)
        self.setWindowTitle('Test')
        self.setObjectName('MyWidget')
        self.setStyleSheet("QWidget#MyWidget{background:grey;}")

        # 調用圓形圖片控件
        self.circle_image = CircleImage(self, 100, 100, )
        self.circle_image.set_image(QPixmap('./image/girl_1.jpg'))
        self.circle_image.move(110, 60)

效果如下
在這裏插入圖片描述
如果給窗口設置透明背景就可以做到一些特殊效果

# 去除背景
self.setWindowFlags(self.windowFlags() | Qt.FramelessWindowHint)
self.setAttribute(Qt.WA_TranslucentBackground)

整個窗口只顯示出這個圓形圖片
在這裏插入圖片描述


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章