pyqt使用graphicsView显示图片

主要流程

• 使用opencv 打开图片
• cv2转为QImage
• QImage转为QPixmap
• 把QPixmap加入到QGraphicsScene
• 把QGraphicsScene加入到graphicsView
• graphicsView show

源码

untitled.py

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setContentsMargins(0, 0, 0, 0)
        self.verticalLayout.setObjectName("verticalLayout")
        self.graphicsView = QtWidgets.QGraphicsView(self.centralwidget)
        self.graphicsView.setObjectName("graphicsView")
        self.verticalLayout.addWidget(self.graphicsView)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23))
        self.menubar.setObjectName("menubar")
        self.menuopen = QtWidgets.QMenu(self.menubar)
        self.menuopen.setObjectName("menuopen")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)
        self.actionopen = QtWidgets.QAction(MainWindow)
        self.actionopen.setObjectName("actionopen")
        self.menuopen.addAction(self.actionopen)
        self.menubar.addAction(self.menuopen.menuAction())

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.menuopen.setTitle(_translate("MainWindow", "File"))
        self.actionopen.setText(_translate("MainWindow", "open"))

main.py

#!-*- coding:utf-8 -*-
import sys, cv2
from PyQt5.QtWidgets import QApplication, QMainWindow, QFileDialog, QGraphicsScene
from PyQt5.QtGui import QPixmap, QImage
import untitled

class mainWindow(QMainWindow):
    def __init__(self):
        super(mainWindow, self).__init__()
        self.ui = untitled.Ui_MainWindow()
        self.ui.setupUi(self)
        # 定义菜单open打开图片
        self.ui.actionopen.triggered.connect(self.open2show)
        # 使用graphicsView显示图片
        self.scene = QGraphicsScene()  # 创建画布
        self.ui.graphicsView.setScene(self.scene)  # 把画布添加到窗口
        self.ui.graphicsView.show()

    def open2show(self):
        print("open  triggered")
        qfile = QFileDialog.getOpenFileName(None, "open image file", ".",
                                            "Image files (*.bmp *.jpg *.png)")
        img = cv2.imread(qfile[0])
        cvimg = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)  # 把opencv 默认BGR转为通用的RGB
        y, x = img.shape[:-1]
        frame = QImage(cvimg, x, y, QImage.Format_RGB888)
        self.scene.clear()  #先清空上次的残留
        self.pix = QPixmap.fromImage(frame)
        self.scene.addPixmap(self.pix)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = mainWindow()
    main.show()
    sys.exit(app.exec_())

缩放

网上有大神直接重新graphicsView类实现图片拖拽与缩放，很少看到用Qt Designer绘制UI并实现缩放的，这里提供一个Qt Designer绘制UI的缩放示例以供参考。

注意：

• 需要重写wheelEvent 滚轮事件函数，实现graphicsView 缩放功能
• 使用Qt Designer绘制时，不填graphicsView组件，需在代码中添加

下面直接上代码
untitled.py 窗口UI代码，使用Qt Designer编写生成

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'untitled.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.verticalLayout = QtWidgets.QVBoxLayout(self.centralwidget)
        self.verticalLayout.setObjectName("verticalLayout")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 23))
        self.menubar.setObjectName("menubar")
        self.menuFile = QtWidgets.QMenu(self.menubar)
        self.menuFile.setObjectName("menuFile")
        MainWindow.setMenuBar(self.menubar)
        self.actionopen = QtWidgets.QAction(MainWindow)
        self.actionopen.setObjectName("actionopen")
        self.menuFile.addAction(self.actionopen)
        self.menubar.addAction(self.menuFile.menuAction())

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.menuFile.setTitle(_translate("MainWindow", "File"))
        self.actionopen.setText(_translate("MainWindow", "open"))

newGraphicsView.py 重写QGraphicsView类

from PyQt5.QtCore import Qt
from PyQt5.QtGui import QWheelEvent
from PyQt5.QtWidgets import QGraphicsView

class GraphicsView(QGraphicsView):
    def __init__(self, parent=None):
        super().__init__(parent=parent)
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setTransformationAnchor(self.AnchorUnderMouse)

    def wheelEvent(self, e: QWheelEvent):
        self.setTransformationAnchor(QGraphicsView.AnchorUnderMouse)
        if e.angleDelta().y() > 0:
            self.scale(1.1, 1.1)
        else:
            self.scale(1 / 1.1, 1 / 1.1)
        self.setTransformationAnchor(self.AnchorUnderMouse)

main.py

#!-*- coding: utf-8 -*-
import sys, cv2
from PyQt5.QtWidgets import QApplication, QMainWindow, QFileDialog, QGraphicsScene, QGraphicsPixmapItem, QGraphicsItem
from PyQt5.QtGui import QPixmap, QImage
from PyQt5.QtCore import Qt
import untitled
from newGraphicsView import GraphicsView

class MyMainWindow(QMainWindow):
    def __init__(self):
        super(MyMainWindow, self).__init__()
        self.ui = untitled.Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.actionopen.triggered.connect(self.showImage)
        #
        self.graphicsView = GraphicsView()
        self.ui.verticalLayout.addWidget(self.graphicsView)
        self.scene = QGraphicsScene()  # 创建画布
        self.graphicsView.setScene(self.scene)  # 把画布添加到窗口
        self.graphicsView.show()

    def showImage(self):
        qFile = QFileDialog.getOpenFileName(self, "Page Designer - Add Pixmap", "",
                                                      "Pixmap Files (*.bmp *.jpg *.png *.xpm)")
        print(qFile)
        if not qFile[0]:
            print("no image select, to return")
            return
        img = cv2.imread(qFile[0])
        cvimg = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)  # 把opencv 默认BGR转为通用的RGB
        y, x = img.shape[:-1]
        frame = QImage(cvimg, x, y, QImage.Format_RGB888)
        # 清除scene残留
        self.scene.clear()
        self.pix = QPixmap.fromImage(frame)
        item = QGraphicsPixmapItem(QPixmap(frame))
        item.setFlags(QGraphicsItem.ItemIsSelectable | QGraphicsItem.ItemIsMovable)
        self.scene.addItem(item)
        # # 平滑缩放，平滑后看不到像素点块
        # item.setTransformationMode(Qt.SmoothTransformation)
        # 让image填充显示窗口
        self.graphicsView.fitInView(item, Qt.KeepAspectRatio)
        pass


if __name__ == '__main__':
    app = QApplication(sys.argv)
    main = MyMainWindow()
    main.show()
    sys.exit(app.exec_())

以下是QGraphicsView系统框图，标识系统内各组件关系