pyqt使用graphicsView显示图片

文章目录

图形界面使用Qt Designer绘制，如下

菜单项添加一个open选项，窗口上是一个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

classUi_MainWindow(object):defsetupUi(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)defretranslateUi(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

classmainWindow(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()defopen2show(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

classUi_MainWindow(object):defsetupUi(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)defretranslateUi(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

classGraphicsView(QGraphicsView):def__init__(self, parent=None):super().__init__(parent=parent)
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setTransformationAnchor(self.AnchorUnderMouse)defwheelEvent(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

classMyMainWindow(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()defshowImage(self):
        qFile = QFileDialog.getOpenFileName(self,"Page Designer - Add Pixmap","","Pixmap Files (*.bmp *.jpg *.png *.xpm)")print(qFile)ifnot 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)passif __name__ =='__main__':
    app = QApplication(sys.argv)
    main = MyMainWindow()
    main.show()
    sys.exit(app.exec_())

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