使用 PyQt5 實現圖片檢視器

TM0831發表於2020-04-20

 一、前言

  在學習 PyQt5 的過程中我會不斷地做一些小的 Demo,用於讓自己能夠更好地理解和學習,這次要做的就是一個圖片檢視器,主要功能包括開啟圖片、拖動圖片、放大和縮小圖片。

  最終實現的圖片檢視器你效果如下:

  

 

二、主要步驟  

1.顯示圖片

  PyQt5 繪圖系統能渲染向量影像、點陣圖影像和輪廓字型文字。一般會使用在修改或者提高現有元件的功能,或者建立自己的元件,使用 PyQt5 的繪圖 API 進行操作。在 Qt 中有 QPainter 類用於執行繪製的操作,繪圖由 paintEvent() 來完成,繪圖的程式碼要放在 QPainter 物件的 start() 和 end() 方法之間。

  要將圖片顯示出來,首先是繼承 QWidget,然後實現 paintEvent() 方法,主要是使用 drawPixmap() 方法,需要傳入 QPixmap 物件並將其繪製出來,繪圖的程式碼如下:

 1 def paintEvent(self, e):
 2     """
 3     receive paint events
 4     :param e: QPaintEvent
 5     :return:
 6     """
 7     if self.scaled_img:
 8         painter = QPainter()
 9         painter.begin(self)
10         painter.drawPixmap(self.point, self.scaled_img)
11         painter.end()

2.拖動圖片

  在圖片成功顯示出來之後,需要能夠去拖動圖片,以便於檢視圖片的每個角落,主要得實現三個方法:mouseMoveEvent、mousePressEvent 和 mouseReleaseEvent,分別對應移動滑鼠、點選滑鼠和鬆開滑鼠三個事件。

  思路是獲取滑鼠點選時的位置,然後根據滑鼠位置的變化來計算圖片需要移動的距離,再移動圖片就行了。具體程式碼如下:

 1 def mouseMoveEvent(self, e):
 2     """
 3     mouse move events for the widget
 4     :param e: QMouseEvent
 5     :return:
 6     """
 7     if self.left_click:
 8         self.end_pos = e.pos() - self.start_pos
 9         self.point = self.point + self.end_pos
10         self.start_pos = e.pos()
11         self.repaint()
12 
13 def mousePressEvent(self, e):
14     """
15     mouse press events for the widget
16     :param e: QMouseEvent
17     :return:
18     """
19     if e.button() == Qt.LeftButton:
20         self.left_click = True
21         self.start_pos = e.pos()
22 
23 def mouseReleaseEvent(self, e):
24     """
25     mouse release events for the widget
26     :param e: QMouseEvent
27     :return:
28     """
29     if e.button() == Qt.LeftButton:
30         self.left_click = False

3.開啟檔案

  有時候我們會想開啟本地的檔案進行檢視,所以還要實現一個開啟檔案的功能。而要實現這一功能,可以用 QFileDialog 類來實現,該類裡有一個 getOpenFileName() 方法,使用該方法能夠開啟本地路徑並選擇符合檔案要求格式的檔案,例如使用“*.png”就支援開啟所有 png 格式的圖片檔案,而不支援其他格式的檔案。

  getOpenFileName() 方法有兩個返回值,第一個返回值是所選擇的檔案的路徑,第二個返回值是檔案型別,得到檔案路徑後就能建立一個 QPixmap 物件,再使用前面顯示圖片的方法進行顯示,具體程式碼如下:

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

4.放大縮小圖片

  在檢視圖片的時候,有時候會需要放大了觀看圖片的某些細節部分,因而需要實現放大和縮小圖片的功能,所以做了兩個按鈕分別用於放大圖片和縮小圖片。

  在 QPainter 中,可以根據 QPainter 的座標系進行各種變換,例如平移(translate)和變化(scale),這裡就可以通過使用 scale() 方法實現放大和縮小圖片。下面是兩個按鈕點選時觸發的方法的具體程式碼:

 1 def large_click(self):
 2     """
 3     used to enlarge image
 4     :return:
 5     """
 6     if self.box.scale < 2:
 7         self.box.scale += 0.1
 8         self.box.adjustSize()
 9         self.update()
10 
11 def small_click(self):
12     """
13     used to reduce image
14     :return:
15     """
16     if self.box.scale > 0.1:
17         self.box.scale -= 0.2
18         self.box.adjustSize()
19         self.update()

  

完整程式碼已上傳到 GitHub

相關文章