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系统框图，标识系统内各组件关系
