使用PyQt5实现图片查看器的示例代码

脚本专栏 2024/11/8 佚名

3 2 1

一、前言

在学习 PyQt5 的过程中我会不断地做一些小的 Demo，用于让自己能够更好地理解和学习，这次要做的就是一个图片查看器，主要功能包括打开图片、拖动图片、放大和缩小图片。

最终实现的图片查看器你效果如下：

二、主要步骤

1.显示图片

PyQt5 绘图系统能渲染矢量图像、位图图像和轮廓字体文本。一般会使用在修改或者提高现有组件的功能，或者创建自己的组件，使用 PyQt5 的绘图 API 进行操作。在 Qt 中有 QPainter 类用于执行绘制的操作，绘图由 paintEvent() 来完成，绘图的代码要放在 QPainter 对象的 start() 和 end() 方法之间。

要将图片显示出来，首先是继承 QWidget，然后实现 paintEvent() 方法，主要是使用 drawPixmap() 方法，需要传入 QPixmap 对象并将其绘制出来，绘图的代码如下：

def paintEvent(self, e):
   """
   receive paint events
   :param e: QPaintEvent
   :return:
   """
   if self.scaled_img:
     painter = QPainter()
     painter.begin(self)
     painter.drawPixmap(self.point, self.scaled_img)
    painter.end()

2.拖动图片

在图片成功显示出来之后，需要能够去拖动图片，以便于查看图片的每个角落，主要得实现三个方法：mouseMoveEvent、mousePressEvent 和 mouseReleaseEvent，分别对应移动鼠标、点击鼠标和松开鼠标三个事件。

思路是获取鼠标点击时的位置，然后根据鼠标位置的变化来计算图片需要移动的距离，再移动图片就行了。具体代码如下：

def mouseMoveEvent(self, e):
   """
   mouse move events for the widget
   :param e: QMouseEvent
   :return:
   """
   if self.left_click:
     self.end_pos = e.pos() - self.start_pos
     self.point = self.point + self.end_pos
     self.start_pos = e.pos()
     self.repaint()
 
 def mousePressEvent(self, e):
   """
   mouse press events for the widget
   :param e: QMouseEvent
   :return:
   """
   if e.button() == Qt.LeftButton:
     self.left_click = True
     self.start_pos = e.pos()
 
 def mouseReleaseEvent(self, e):
   """
   mouse release events for the widget
   :param e: QMouseEvent
   :return:
   """
   if e.button() == Qt.LeftButton:
     self.left_click = False

3.打开文件

有时候我们会想打开本地的文件进行查看，所以还要实现一个打开文件的功能。而要实现这一功能，可以用 QFileDialog 类来实现，该类里有一个 getOpenFileName() 方法，使用该方法能够打开本地路径并选择符合文件要求格式的文件，例如使用“*.png”就支持打开所有 png 格式的图片文件，而不支持其他格式的文件。

getOpenFileName() 方法有两个返回值，第一个返回值是所选择的文件的路径，第二个返回值是文件类型，得到文件路径后就能创建一个 QPixmap 对象，再使用前面显示图片的方法进行显示，具体代码如下：

def open_image(self):
  """
  select image file and open it
  :return:
  """
  img_name, _ = QFileDialog.getOpenFileName(self, "Open Image File", "*.jpg;;*.png;;*.jpeg")
  self.box.set_image(img_name)

4.放大缩小图片

在查看图片的时候，有时候会需要放大了观看图片的某些细节部分，因而需要实现放大和缩小图片的功能，所以做了两个按钮分别用于放大图片和缩小图片。

在 QPainter 中，可以根据 QPainter 的坐标系进行各种变换，例如平移（translate）和变化（scale），这里就可以通过使用 scale() 方法实现放大和缩小图片。下面是两个按钮点击时触发的方法的具体代码：

 def large_click(self):
   """
   used to enlarge image
   :return:
   """
   if self.box.scale < :
     self.box.scale += .
     self.box.adjustSize()
     self.update()
 
 def small_click(self):
   """
   used to reduce image
   :return:
   """
   if self.box.scale > .:
     self.box.scale -= .
     self.box.adjustSize()
     self.update()

完整代码已上传到 GitHub ！

PyQt5,图片查看器