pyqt使用graphicsView显示图片

文章目录

  • 源码
  • untitled.py
  • main.py
  • 缩放
  • 图形界面使用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
    
    
    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系统框图,标识系统内各组件关系

    来源:tianzong2019

    物联沃分享整理
    物联沃-IOTWORD物联网 » pyqt使用graphicsView显示图片

    发表评论