怎么在Qt Designer设计的界面上显示Matplotlib的绘图？

news2024/10/5 13:34:52

首先，利用Qt Designer设计界面。
在这里插入图片描述
设计好后保存为ui文件。
接着，将ui文件转为py文件。
我喜欢在python中进行转换，因此把转换命令封装为函数，运行一下即可。

import os
# pyuic5 -o output_file.py input_file.ui
#通过命令把.ui文件转换成.py文件
def ui_to_py(path_ui,path_py):
    '''把ui文件转为py文件.
    path_ui:ui文件路径,
    path_py:py文件路径'''
    cmd = f'pyuic5 -o {path_py} {path_ui}'
    os.system(cmd)
        
if __name__ =="__main__":
    ui='G:/MyPythonFiles/pyqt绘图测试界面.ui'
    py='G:/MyPythonFiles/pyqt绘图测试界面.py'
    ui_to_py(ui,py)
    print('转换完毕')

转换完成后的代码如下：

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

# Form implementation generated from reading ui file 'G:/MyPythonFiles/pyqt绘图测试界面.ui'
#
# Created by: PyQt5 UI code generator 5.15.10
#
# 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(1260, 689)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.graphicsView = QtWidgets.QGraphicsView(self.centralwidget)
        self.graphicsView.setGeometry(QtCore.QRect(370, 20, 801, 581))
        self.graphicsView.setObjectName("graphicsView")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 1260, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

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

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "绘图测试"))

然后就是使用Matplotlib绘制图片，然后在我们刚才设计的界面上显示了。
此时，我们需要写一个类，继承在Qt Designer上设计的界面。
同时，创建一个QGraphicsScene，将其添加到self.graphicsView中。

就是这么简单！
但是因为找不到相关的资料，一开始我研究了好多天好多天，一直不得要领！简直是太痛苦了！
好在，最后还是弄明白了！ChatGTP帮了我许多忙！


from PyQt5.QtWidgets import QMainWindow, QGraphicsScene, QGraphicsView,QApplication
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from matplotlib.figure import Figure
import sys

import numpy as np
import matplotlib.pyplot as plt
# from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas

from pyqt绘图测试界面 import *

class MyWindow(QMainWindow,Ui_MainWindow):
    def __init__(self):
        # 继承设计的ui界面
        super().__init__()
        # 继承其方法
        self.setupUi(self)
        self.retranslateUi(self)


        """ QGraphicsScene是Qt中的一个类，它是2D图形界面的基础，
        可以在其上添加各种图形项，例如线条、矩形、椭圆、文本、像素图等，
        还可以设置它们的位置、大小、旋转等属性。
        而QGraphicsView则是用于显示QGraphicsScene的视图类，
        可以实现缩放、平移等交互操作，以及使用鼠标对图形项进行选择、移动等操作。 """
        
        # 创建 QGraphicsScene，并添加到QGraphicsView
        self.scene = QGraphicsScene(self)
        self.graphicsView.setScene(self.scene)

        # 创建 Matplotlib Figure 和 FigureCanvas
        self.figure = Figure()
        # 把figure转为pyqt的一个控件
        self.canvas = FigureCanvas(self.figure)
        self.axes = self.figure.add_subplot(111)

        # 将 FigureCanvas 添加到 QGraphicsScene 中
        self.scene.addWidget(self.canvas)
        
        self.myplot()
        
    def myplot(self):

        # 绘制图像
        x = np.linspace(0, 10, 100)
        y = np.sin(x)
        self.axes.plot(x, y)

        

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