使用 PyQt5 實現圖片查看器

 一、前言

　　在學習 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 < 2:
        self.box.scale += 0.1
        self.box.adjustSize()
        self.update()

def small_click(self):
    """
    used to reduce image
    :return:
    """
    if self.box.scale > 0.1:
        self.box.scale -= 0.2
        self.box.adjustSize()
        self.update()

　　

完整代碼已上傳到 GitHub！