PyQt自定义控件之实现圆形图片

系统管理员 2023-07-13 15:01 268阅读 0赞

实现圆形图片我们有两种方式：

第一种：使用 qss样式表的 border-radius 来实现控件的圆形效果，但这种方式会出现边界锯齿模糊的问题

第二种：重写控件 paintEvent 事件来重新绘制

这里我们讨论的是第二种方式，下面是控件实现的代码：

  1. class CircleImage(QWidget):
  2.     '''绘制圆形图片'''
  4.     def __init__(self, parent=None):
  5.         super(CircleImage, self).__init__(parent)
  6.         self.resize(100, 100)
  7.         self.circle_image = None
  9.     def set_image(self, image):
  10.         '''设置绘制的图片'''
  11.         self.circle_image = image
  12.         self.update()
  14.     def paintEvent(self, event):
  15.         '''重写绘制事件'''
  16.         super(CircleImage, self).paintEvent(event)
  17.         painter = QPainter(self)
  18.         painter.setRenderHint(QPainter.Antialiasing, True)  # 设置抗锯齿
  19.         pen = Qt.NoPen
  20.         painter.setPen(pen)                                    # 设置取消描边边框
  21.         brush = QBrush(self.circle_image)                   
  22.         painter.setBrush(brush)                                # 设置绘制内容
  23.         painter.drawRoundedRect(self.rect(), self.width() / 2, self.height() / 2)

这里有两个概念需要解释一下：












画笔（QPen） 用于设置绘制内容的描边边框，这里设置为Qt.NoPen表示取消描边边框
刷子（QBrush） 用于设置绘制的内容，可以为图片或者颜色

下面是测试单元程序代码：

  1. if __name__ == '__main__':
  2.     # 控件测试程序
  3.     app = QApplication(sys.argv)
  5.     widget = CircleImage()
  6.     image = QPixmap('test.png')
  7.     widget.set_image(image.scaled(widget.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation))
  8.     widget.show()
  10.     sys.exit(app.exec_())

这里需要介绍一下的是对图片缩放时设置的参数












Qt.KeepAspectRatio 用于设置缩放图片时保持比例
Qt.SmoothTransformation 用于设置图片转换过程中避免失真

效果如下
在这里插入图片描述
如果给窗口设置透明背景就可以做到一些特殊效果

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

整个窗口只显示出这个圆形图片
在这里插入图片描述

当然我们也可以添加一个边框进去：

  1. def paintEvent(self, event):
  2.         '''重写绘制事件'''
  3.         super(CircleImage, self).paintEvent(event)
  4.         painter = QPainter(self)
  5.         painter.setRenderHint(QPainter.Antialiasing, True)  
  6.         pen = QPen(QColor('#ff0000'))                       # 设置边框颜色
  7.         pen.setWidth(2)                                     # 设置边框宽度
  8.         painter.setPen(pen)                                 # 添加描边边框
  9.         brush = QBrush(self.circle_image)                   
  10.         painter.setBrush(brush)
  11.         rect = QRect(2, 2, self.width() - 4, self.height() - 4)
  12.         painter.drawRoundedRect(rect, self.width() / 2, self.height() / 2)

这里我们有留意到绘制的时候坐标位置进行了调整

  1. rect = QRect(2, 2, self.width() - 4, self.height() - 4)

这是因为我们添加了边框之后，绘制的内容就包含了边框的宽度：水平方向包含左右两边，垂直方向包含上下两边

得到效果如下：

在这里插入图片描述

如果把绘制的图片去掉就可以实现出空心圆环的效果：

  1. brush = QBrush(Qt.NoBrush)    # 移除绘制的内容

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读