QGraphicsView 显示图片

QGraphicsView 是 PyQt6 里负责显示图形的元件，搭配 QGraphicsScene 和 QtGui.QPixmap() 就可以显示图片，这篇教学会介绍如何在 PyQt6 视窗里加入 QGraphicsView 元件并显示图片。

快速导览：

• QGraphicsView 显示图片
• 改变图片尺寸
• 设定图片位置
• 显示多张图片

因为 Google Colab 不支援 PyQt6，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

QGraphicsView 显示图片

建立 PyQt6 视窗对象后，透过 QtWidgets.QGraphicsView(widget) 方法，就能在指定的元件中建立显示图形元件，QGraphicsView 建立后，需再使用 QtWidgets.QGraphicsScene() 建立场景元件，再透过 QtGui.QPixmap() 于场景中加入图片，最后将场景加入 QGraphicsView 就可以显示图片，如果场景大小超过显示区域，会自动出现卷轴。

from PyQt6 import QtWidgets, QtGui
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 300)

grview = QtWidgets.QGraphicsView(Form)  # 加入 QGraphicsView
grview.setGeometry(20, 20, 260, 200)    # 設定 QGraphicsView 位置與大小
scene = QtWidgets.QGraphicsScene()      # 加入 QGraphicsScene
scene.setSceneRect(0, 0, 300, 400)      # 設定 QGraphicsScene 位置與大小
img = QtGui.QPixmap('mona.jpg')         # 加入圖片
scene.addPixmap(img)                    # 將圖片加入 scene
grview.setScene(scene)                  # 設定 QGraphicsView 的場景為 scene

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtGui
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        self.grview = QtWidgets.QGraphicsView(self)  # 加入 QGraphicsView
        self.grview.setGeometry(20, 20, 260, 200)    # 設定 QGraphicsView 位置與大小
        scene = QtWidgets.QGraphicsScene()           # 加入 QGraphicsScene
        scene.setSceneRect(0, 0, 300, 400)           # 設定 QGraphicsScene 位置與大小
        img = QtGui.QPixmap('mona.jpg')              # 加入圖片
        scene.addPixmap(img)                         # 將圖片加入 scene
        self.grview.setScene(scene)                  # 設定 QGraphicsView 的場景為 scene

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

改变图片尺寸

使用 QtGui.QPixmap() 建立图片后，就能透过 scaled(w, h) 方法调整图片大小，下方的程序码执行后，会显示缩小后的图片。

from PyQt6 import QtWidgets, QtGui
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 300)                    # 視窗大小

grview = QtWidgets.QGraphicsView(Form)
grview.setGeometry(20, 20, 260, 200)     # QGraphicsView 位置 (20, 20) 和大小 260x200
scene = QtWidgets.QGraphicsScene()
scene.setSceneRect(0, 0, 120, 160)       # QGraphicsScene 相對位置 (20, 20) 和大小 120x160
img = QtGui.QPixmap('mona.jpg')
img = img.scaled(120,160)                # 調整圖片大小為 120x160
scene.addPixmap(img)
grview.setScene(scene)

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtGui
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        self.grview = QtWidgets.QGraphicsView(self)
        self.grview.setGeometry(20, 20, 260, 200)  # QGraphicsView 位置 (20, 20) 和大小 260x200
        scene = QtWidgets.QGraphicsScene()
        scene.setSceneRect(0, 0, 120, 160)         # QGraphicsScene 相對位置 (20, 20) 和大小 120x160
        img = QtGui.QPixmap('mona.jpg')
        img = img.scaled(120,160)                  # 調整圖片大小為 120x160
        scene.addPixmap(img)
        self.grview.setScene(scene)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

设定图片位置

因为使用 setSceneRect 时定位是以“中心点”为主，如果要改成熟悉的“左上角”定位，可透过简单的数学公式换算，下方的程序码执行后，会将定位点改成左上角，修改 x 和 y 的数值，就可以控制图片左上角的座标。

from PyQt6 import QtWidgets, QtGui
import sys
app = QtWidgets.QApplication(sys.argv)

Form = QtWidgets.QWidget()
Form.setWindowTitle('oxxo.studio')
Form.resize(300, 300)

grview = QtWidgets.QGraphicsView(Form)
gw = 260
gh = 200
grview.setGeometry(20, 20, gw, gh)    # QGraphicsView 的長寬改成變數
scene = QtWidgets.QGraphicsScene()
img = QtGui.QPixmap('mona.jpg')
img_w = 120                           # 顯示圖片的寬度
img_h = 160                           # 顯示圖片的高度
img = img.scaled(img_w, img_h)
x = 20                                # 左上角 x 座標
y = 20                                # 左上角 y 座標
dx = int((gw - img_w) / 2) - x        # 修正公式
dy = int((gh - img_h) / 2) - y
scene.setSceneRect(dx, dy, img_w, img_h)
scene.addPixmap(img)
grview.setScene(scene)

Form.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtGui
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        self.grview = QtWidgets.QGraphicsView(self)
        gw = 260
        gh = 200
        self.grview.setGeometry(20, 20, gw, gh)    # QGraphicsView 的長寬改成變數
        scene = QtWidgets.QGraphicsScene()
        img = QtGui.QPixmap('mona.jpg')
        img_w = 120                           # 顯示圖片的寬度
        img_h = 160                           # 顯示圖片的高度
        img = img.scaled(img_w, img_h)
        x = 20                                # 左上角 x 座標
        y = 20                                # 左上角 y 座標
        dx = int((gw - img_w) / 2) - x        # 修正公式
        dy = int((gh - img_h) / 2) - y
        scene.setSceneRect(dx, dy, img_w, img_h)
        scene.addPixmap(img)
        self.grview.setScene(scene)

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

显示多张图片

如果要加入多张图片，就要使用 QItem 的做法，下方的程序码执行后，会在场景里放入两个图片尺寸不同的 QItem。

from PyQt6 import QtWidgets, QtGui
import sys

app = QtWidgets.QApplication(sys.argv)
MainWindow = QtWidgets.QMainWindow()
MainWindow.setObjectName("MainWindow")
MainWindow.setWindowTitle("oxxo.studio")
MainWindow.resize(300, 300)

grview = QtWidgets.QGraphicsView(MainWindow)  # 加入 QGraphicsView
grview.setGeometry(0, 0, 300, 300)            # 設定 QGraphicsView 位置與大小
scene = QtWidgets.QGraphicsScene()            # 加入 QGraphicsScene
scene.setSceneRect(0, 0, 200, 200)            # 設定 QGraphicsScene 位置與大小
img = QtGui.QPixmap('mona.jpg')               # 建立圖片
img1 = img.scaled(200,50)                     # 建立不同尺寸圖片
qitem1 = QtWidgets.QGraphicsPixmapItem(img1)  # 設定 QItem，內容是 img1
img2 = img.scaled(100,150)                    # 建立不同尺寸圖片
qitem2 = QtWidgets.QGraphicsPixmapItem(img2)  # 設定 QItem，內容是 img2
scene.addItem(qitem1)                         # 場景中加入 QItem
scene.addItem(qitem2)                         # 場景中加入 QItem
grview.setScene(scene)                        # 設定 QGraphicsView 的場景為 scene

MainWindow.show()
sys.exit(app.exec())

class 写法：

from PyQt6 import QtWidgets, QtGui
import sys

class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setWindowTitle('oxxo.studio')
        self.resize(300, 300)
        self.ui()

    def ui(self):
        self.grview = QtWidgets.QGraphicsView(self)   # 加入 QGraphicsView
        self.grview.setGeometry(0, 0, 300, 300)       # 設定 QGraphicsView 位置與大小
        scene = QtWidgets.QGraphicsScene()            # 加入 QGraphicsScene
        scene.setSceneRect(0, 0, 200, 200)            # 設定 QGraphicsScene 位置與大小
        img = QtGui.QPixmap('mona.jpg')               # 建立圖片
        img1 = img.scaled(200,50)                     # 建立不同尺寸圖片
        qitem1 = QtWidgets.QGraphicsPixmapItem(img1)  # 設定 QItem，內容是 img1
        img2 = img.scaled(100,150)                    # 建立不同尺寸圖片
        qitem2 = QtWidgets.QGraphicsPixmapItem(img2)  # 設定 QItem，內容是 img2
        scene.addItem(qitem1)                         # 場景中加入 QItem
        scene.addItem(qitem2)                         # 場景中加入 QItem
        self.grview.setScene(scene)                  # 設定 QGraphicsView 的場景為 scene

if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    Form = MyWidget()
    Form.show()
    sys.exit(app.exec())

意见反馈