【100天精通python】Day39:GUI界面编程_PyQt 从入门到实战(下)_图形绘制和动画效果,数据可视化,刷新交互

目录

专栏导读 

6 图形绘制与动画效果

6.1 绘制基本图形、文本和图片

6.2 实现动画效果和过渡效果

7 数据可视化

7.1 使用 Matplotlib绘制图表

7.2 使用PyQtGraph绘制图表

7.3 数据的实时刷新和交互操作

7.3.1 数据的实时刷新

7.3.2 交互操作

7.4  自定义数据可视化组件  


专栏导读 

专栏订阅地址:https://blog.csdn.net/qq_35831906/category_12375510.html


6 图形绘制与动画效果

6.1 绘制基本图形、文本和图片

在 PyQt6 中,你可以使用 QPainter 进行图形绘制操作。以下是一个示例,展示如何在窗口上绘制基本图形、文本和图片:

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow
from PyQt6.QtGui import QPainter, QPixmap, QColor, QPen
from PyQt6.QtCore import Qtclass DrawingWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("Drawing Example")self.setGeometry(100, 100, 600, 400)def paintEvent(self, event):try:painter = QPainter(self)painter.setRenderHint(QPainter.RenderHint.Antialiasing)  # 修正此处# 绘制矩形painter.setBrush(QColor(255, 0, 0))painter.drawRect(50, 50, 100, 100)# 绘制椭圆painter.setBrush(QColor(0, 255, 0))painter.drawEllipse(200, 50, 100, 100)# 绘制文本painter.setPen(QPen(QColor(0, 0, 255)))painter.setFont(self.font())  # 使用默认字体painter.drawText(50, 200, "Hello, PyQt!")# 绘制图片,并使其自适应窗口pixmap = QPixmap("image.png")if not pixmap.isNull():scaled_pixmap = pixmap.scaled(self.width() // 2, self.height() // 2, Qt.AspectRatioMode.KeepAspectRatio)x = (self.width() - scaled_pixmap.width())y = (self.height() - scaled_pixmap.height()) painter.drawPixmap(x, y, scaled_pixmap)except Exception as e:print("An error occurred during painting:", str(e))def resizeEvent(self, event):# 在窗口大小改变时重新绘制self.update()if __name__ == "__main__":app = QApplication(sys.argv)window = DrawingWindow()window.show()sys.exit(app.exec())

 输出:

6.2 实现动画效果和过渡效果

        实现动画效果和过渡效果可以使用 QTimer 来定时更新界面,以实现图形的平滑变化。以下是一个简单的示例,展示如何使用 QTimer 实现简单的平滑过渡效果:

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QPushButton
from PyQt6.QtCore import QTimer, QRect, QPropertyAnimation
from PyQt6.QtGui import QPainter, QColor, QPen, QBrush
from PyQt6.QtCore import QVariantAnimationclass MyWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("Animation Example")self.setGeometry(100, 100, 400, 300)self.button = QPushButton("Animate", self)self.button.setGeometry(150, 150, 100, 30)self.button.clicked.connect(self.start_animation)# 初始位置和颜色self.rect = QRect(50, 50, 100, 100)self.rect_color = QColor(0, 0, 255)  # 初始颜色self.ellipse = QRect(250, 150, 100, 100)self.ellipse_color = QColor(0, 255, 0)  # 初始颜色# 颜色动画self.color_animation_rect = QVariantAnimation()self.color_animation_rect.valueChanged.connect(self.update_color_rect)self.color_animation_rect.setDuration(2000)  # 2秒的动画self.color_animation_rect.setStartValue(QColor(255, 0, 0))self.color_animation_rect.setEndValue(QColor(0, 0, 255))self.color_animation_ellipse = QVariantAnimation()self.color_animation_ellipse.valueChanged.connect(self.update_color_ellipse)self.color_animation_ellipse.setDuration(2000)  # 2秒的动画self.color_animation_ellipse.setStartValue(QColor(0, 255, 0))self.color_animation_ellipse.setEndValue(QColor(0, 0, 255))self.animation_timer = QTimer()self.animation_timer.timeout.connect(self.animate)def start_animation(self):self.animation_timer.start(10)self.color_animation_rect.start()self.color_animation_ellipse.start()def animate(self):try:# 移动矩形if self.rect.x() < 250:self.rect.translate(1, 0)else:self.animation_timer.stop()# 移动椭圆if self.ellipse.x() > 50:self.ellipse.translate(-1, 0)except Exception as e:print("An error occurred during animation:", str(e))self.update()def update_color_rect(self, color):self.rect_color = colordef update_color_ellipse(self, color):self.ellipse_color = colordef paintEvent(self, event):try:painter = QPainter(self)# 绘制实心矩形brush_rect = QBrush(self.rect_color)painter.setBrush(brush_rect)painter.drawRect(self.rect)# 绘制实心椭圆brush_ellipse = QBrush(self.ellipse_color)painter.setBrush(brush_ellipse)painter.drawEllipse(self.ellipse)except Exception as e:print("An error occurred during painting:", str(e))if __name__ == "__main__":app = QApplication(sys.argv)window = MyWindow()window.show()sys.exit(app.exec())

7 数据可视化

        数据可视化是将数据转化为图表、图形等可视化元素,以便更直观地理解和分析数据。在 PyQt 中,你可以使用第三方库如 Matplotlib 和 PyQtGraph 来绘制图表和实现数据可视化。以下是详解和示例:

7.1 使用 Matplotlib绘制图表

        Matplotlib 是一个强大的数据可视化库,可以创建各种类型的图表,包括折线图、散点图、柱状图等。

以下是一个使用 Matplotlib 在 PyQt 窗口中绘制简单折线图的示例:

import sys
from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
import matplotlib.pyplot as pltclass MyWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("Matplotlib 示例")  # 设置窗口标题self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小main_widget = QWidget(self)self.setCentralWidget(main_widget)layout = QVBoxLayout()  # 创建垂直布局main_widget.setLayout(layout)fig, ax = plt.subplots()  # 创建 Matplotlib 图形和轴对象canvas = FigureCanvas(fig)  # 将图形对象放入 Matplotlib 画布中layout.addWidget(canvas)  # 将画布添加到布局中x = [1, 2, 3, 4, 5]y = [10, 25, 18, 35, 30]ax.plot(x, y)  # 在轴上绘制折线图if __name__ == "__main__":app = QApplication(sys.argv)  # 创建应用程序对象window = MyWindow()  # 创建自定义窗口对象window.show()  # 显示窗口sys.exit(app.exec())  # 运行应用程序事件循环

7.2 使用PyQtGraph绘制图表

        PyQtGraph 是一个专注于实时数据可视化的库,适用于需要快速显示大量数据的场景。

以下是一个使用 PyQtGraph 在 PyQt 窗口中绘制实时曲线图的示例:

import sys
import numpy as np
from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
import pyqtgraph as pgclass MyWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("PyQtGraph 示例")  # 设置窗口标题self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小main_widget = QWidget(self)self.setCentralWidget(main_widget)layout = QVBoxLayout()  # 创建垂直布局main_widget.setLayout(layout)self.plot_widget = pg.PlotWidget()  # 创建 PyQtGraph 绘图部件layout.addWidget(self.plot_widget)  # 将绘图部件添加到布局中self.data = np.random.normal(size=100)  # 创建随机数据数组self.curve = self.plot_widget.plot(self.data)  # 在绘图部件上绘制曲线def update_plot(self):self.data[:-1] = self.data[1:]  # 将数据向前移动一位self.data[-1] = np.random.normal()  # 生成新的随机数据self.curve.setData(self.data)  # 更新绘图曲线的数据if __name__ == "__main__":app = QApplication(sys.argv)  # 创建应用程序对象window = MyWindow()  # 创建自定义窗口对象window.show()  # 显示窗口timer = pg.QtCore.QTimer()  # 创建定时器对象timer.timeout.connect(window.update_plot)  # 连接定时器的超时信号和更新绘图函数timer.start(100)  # 每100毫秒触发一次定时器超时信号,更新绘图sys.exit(app.exec())  # 运行应用程序事件循环

7.3 数据的实时刷新和交互操作

        实现数据的实时刷新可以使用定时器来周期性地更新图表。在上面的 PyQtGraph 示例中,通过创建一个定时器并连接到 update_plot 方法来实现实时刷新。

        数据的实时刷新和交互操作是在数据可视化中的重要部分,可以让用户更加直观地观察数据变化和与数据进行交互。本部分将详细解释如何在 PyQt 中实现数据的实时刷新和一些常见的交互操作。

7.3.1 数据的实时刷新

        在数据可视化中,实时刷新通常需要使用定时器来定期更新图表或图形的显示。在 PyQt 中,可以使用 QTimer 来实现定时刷新。

以下是一个示例,展示如何在一个 Matplotlib 图表中实现数据的实时

import sys
import random
import matplotlib.pyplot as plt
from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
from PyQt6.QtCore import QTimerclass RealTimePlotWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("实时绘图示例")  # 设置窗口标题self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小main_widget = QWidget(self)self.setCentralWidget(main_widget)layout = QVBoxLayout()  # 创建垂直布局main_widget.setLayout(layout)self.fig, self.ax = plt.subplots()  # 创建 Matplotlib 图形和轴对象self.canvas = FigureCanvas(self.fig)  # 将图形对象放入 Matplotlib 画布中layout.addWidget(self.canvas)  # 将画布添加到布局中self.data = []  # 存储数据self.x_values = []  # 存储 x 值self.line, = self.ax.plot(self.x_values, self.data)  # 创建初始曲线对象self.timer = QTimer(self)  # 创建定时器对象self.timer.timeout.connect(self.update_plot)  # 连接定时器的超时信号和更新绘图函数self.timer.start(1000)  # 每秒触发一次定时器超时信号def update_plot(self):new_data = random.randint(0, 100)  # 生成新的随机数据self.data.append(new_data)  # 将新数据添加到数据列表中self.x_values.append(len(self.data))  # 添加对应的 x 值self.line.set_xdata(self.x_values)  # 更新曲线的 x 值self.line.set_ydata(self.data)  # 更新曲线的 y 值self.ax.relim()  # 重新计算坐标轴限制self.ax.autoscale_view()  # 自动调整坐标轴范围self.canvas.draw()  # 重新绘制画布if __name__ == "__main__":app = QApplication(sys.argv)  # 创建应用程序对象window = RealTimePlotWindow()  # 创建实时绘图窗口对象window.show()  # 显示窗口sys.exit(app.exec())  # 运行应用程序事件循环

7.3.2 交互操作

        在数据可视化中,用户可以通过交互操作来与图表或图形进行互动,比如缩放、平移、鼠标悬停显示数据点等。Matplotlib 和 PyQtGraph 都提供了丰富的交互功能。

以下是一个使用 Matplotlib 实现鼠标悬停显示数据点的示例:

import sys
import matplotlib.pyplot as plt
from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvasclass InteractivePlotWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("交互式绘图示例")  # 设置窗口标题self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小main_widget = QWidget(self)self.setCentralWidget(main_widget)layout = QVBoxLayout()  # 创建垂直布局main_widget.setLayout(layout)self.fig, self.ax = plt.subplots()  # 创建 Matplotlib 图形和轴对象self.canvas = FigureCanvas(self.fig)  # 将图形对象放入 Matplotlib 画布中layout.addWidget(self.canvas)  # 将画布添加到布局中self.data = [1, 2, 3, 4, 5]self.x_values = [1, 2, 3, 4, 5]self.line, = self.ax.plot(self.x_values, self.data)  # 创建初始曲线对象self.cid = self.fig.canvas.mpl_connect("motion_notify_event", self.on_hover)  # 连接鼠标移动事件和悬停函数def on_hover(self, event):if event.inaxes == self.ax:  # 如果鼠标位于图形轴上x, y = event.xdata, event.ydata  # 获取鼠标位置的数据坐标self.ax.set_title(f"悬停于点 ({x:.2f}, {y:.2f})")  # 设置标题显示鼠标位置self.canvas.draw()  # 重新绘制画布以更新标题显示if __name__ == "__main__":app = QApplication(sys.argv)  # 创建应用程序对象window = InteractivePlotWindow()  # 创建交互式绘图窗口对象window.show()  # 显示窗口sys.exit(app.exec())  # 运行应用程序事件循环

在这个示例中,鼠标悬停在图表上时,会在图表的标题中显示鼠标所在的数据点坐标。

        综上所述,实现数据的实时刷新和交互操作可以增强数据可视化的效果,让用户更好地与数据进行互动。在 PyQt 中,使用定时器和相应的事件处理函数可以实现数据的实时刷新,而使用事件处理函数可以实现各种交互操作。

7.4  自定义数据可视化组件  

         在 PyQt 中,你可以通过自定义数据可视化组件来满足特定需求,这可以包括自定义图表、图形、绘图区域等。自定义数据可视化组件允许你根据应用程序的要求创建特定样式、功能和交互效果。下面是一个简单的示例,演示如何在 PyQt 中创建自定义的数据可视化组件。

import sys
import random
from PyQt6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget
from PyQt6.QtCore import Qt
from matplotlib.backends.backend_qt5agg import FigureCanvasQTAgg as FigureCanvas
import matplotlib.pyplot as pltclass CustomVisualization(QWidget):def __init__(self):super().__init__()layout = QVBoxLayout()  # 创建垂直布局self.setLayout(layout)self.fig, self.ax = plt.subplots()  # 创建 Matplotlib 图形和轴对象self.canvas = FigureCanvas(self.fig)  # 将图形对象放入 Matplotlib 画布中layout.addWidget(self.canvas)  # 将画布添加到布局中self.data = [random.randint(0, 100) for _ in range(10)]  # 随机数据self.x_values = list(range(1, 11))  # x 值self.line, = self.ax.plot(self.x_values, self.data)  # 创建初始曲线对象def update_data(self):self.data = [random.randint(0, 100) for _ in range(10)]  # 生成新的随机数据self.line.set_ydata(self.data)  # 更新曲线的 y 值self.ax.relim()  # 重新计算坐标轴限制self.ax.autoscale_view()  # 自动调整坐标轴范围self.canvas.draw()  # 重新绘制画布class CustomVisualizationWindow(QMainWindow):def __init__(self):super().__init__()self.setWindowTitle("自定义可视化示例")  # 设置窗口标题self.setGeometry(100, 100, 800, 600)  # 设置窗口位置和大小self.custom_viz = CustomVisualization()  # 创建自定义可视化部件self.setCentralWidget(self.custom_viz)  # 将部件设置为中心部件self.timer = Nonedef start_timer(self):if self.timer is None:self.timer = self.startTimer(1000)  # 创建定时器并每秒触发一次def timerEvent(self, event):self.custom_viz.update_data()  # 在定时器触发时更新数据if __name__ == "__main__":app = QApplication(sys.argv)  # 创建应用程序对象window = CustomVisualizationWindow()  # 创建自定义可视化窗口对象window.show()  # 显示窗口window.start_timer()  # 启动定时器sys.exit(app.exec())  # 运行应用程序事件循环

        这个示例中创建了一个自定义的数据可视化组件 CustomVisualization,它使用 Matplotlib 在 PyQt 窗口中绘制一个折线图。通过定时器,可以周期性地更新数据并实现数据的实时刷新。你可以根据需求对自定义可视化组件进行扩展,添加交互功能、定制样式等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/42810.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【WPF】 本地化的最佳做法

【WPF】 本地化的最佳做法 资源文件英文资源文件 en-US.xaml中文资源文件 zh-CN.xaml 资源使用App.xaml主界面布局cs代码 App.config辅助类语言切换操作类资源 binding 解析类 实现效果 应用程序本地化有很多种方式&#xff0c;选择合适的才是最好的。这里只讨论一种方式&#…

Unity制作一个简单的登入注册页面

1.创建Canvas组件 首先我们创建一个Canvas画布&#xff0c;我们再在Canvas画布底下创建一个空物体&#xff0c;取名为Resgister。把空物体的锚点设置为全屏撑开。 2.我们在Resgister空物体底下创建一个Image组件&#xff0c;改名为bg。我们也把它 的锚点设置为全屏撑开状态。接…

【深入理解ES6】字符串和正则表达式

概念 字符串&#xff08;String&#xff09;是JavaScript6大原始数据类型。其他几个分别是Boolean、Null、Undefined、Number、Symbol&#xff08;es6新增&#xff09;。 更好的Unicode支持 1. UTF-16码位 字符串里的字符有两种&#xff1a; 前 个码位均以16位的编码单元…

总结,由于顺丰的问题,产生了电脑近期一个月死机问题集锦

由于我搬家&#xff0c;我妈搞顺丰发回家&#xff0c;但是没有检查有没有坏&#xff0c;并且我自己由于不可抗力因素&#xff0c;超过了索赔时间&#xff0c;反馈给顺丰客服&#xff0c;说超过了造成了无法索赔的情况&#xff0c;现在总结发生了损坏配件有几件&#xff0c;显卡…

文心一言最新重磅发布!

8月16日&#xff0c;由深度学习技术及应用国家工程研究中心主办的WAVE SUMMIT深度学习开发者大会2023举办。百度首席技术官、深度学习技术及应用国家工程研究中心主任王海峰以《大语言模型为通用人工智能带来曙光》为题&#xff0c;阐述了大语言模型具备理解、生成、逻辑、记忆…

【云原生】k8s存储管理中ConfigMap Secret的使用

目录 1 ConfigMap 1.1 简介 1.2 优点 1.3 定义 ConfigMap 1.4 使用 2 Secret 2.1 简介 2.1 定义 Secret 2.2 使用 1 ConfigMap 1.1 简介 在 Kubernetes 中&#xff0c;ConfigMap 是一种用于存储非敏感信息的 Kubernetes 对象。它用于存储配置数据&#xff0c;如键值…

Vue 2 动态组件和异步组件

先阅读 【Vue 2 组件基础】中的初步了解动态组件。 动态组件与keep-alive 我们知道动态组件使用is属性和component标签结合来切换不同组件。 下面给出一个示例&#xff1a; <!DOCTYPE html> <html><head><title>Vue 动态组件</title><scri…

Typora 相对路径保存图片以及 Gitee 无法显示图片

目录 Typora 相对路径保存图片 Gitee 无法显示图片 Typora 相对路径保存图片 Step1&#xff1a;修改 Typora 的偏好设置 自动在当前目录创建名为 "./${filename}.assets" 的文件夹粘贴图片到 md 中时&#xff0c;图片会自动另存到 "./${filename}.assets&qu…

LVGL基本控件介绍

1. 弧(lv_arc) 特点 弧的0度在右边&#xff0c;90度在下边 效果图 源码 void lv_arc_demo(void) {/* Create an Arc */lv_obj_t* arc lv_arc_create(lv_scr_act(), NULL);/* Set Background range */lv_arc_set_bg_angles(arc, 0, 360);/* Set Forward range */lv_arc_set…

第十课:Qt 字符编码和中文乱码相关问题

功能描述&#xff1a;最全的 Qt 字符编码相关知识以及中文乱码的原因与解决办法 一、字符编码种类 ASCII 码 美国人对信息交流的编码&#xff0c;包括 26 个字母&#xff08;大小写&#xff09;、数字和标点符号等&#xff0c;用一个字节&#xff08;8 位&#xff09;表示这些…

eNSP:VLAN-hybrid实验应用

实验要求&#xff1a; 拓扑图 配置 sw1: [sw1]vlan batch 2 to 6[sw1]int Ethernet 0/0/2 [sw1-Ethernet0/0/2]port link-type access [sw1-Ethernet0/0/2]port default vlan 2 [sw1-Ethernet0/0/2]int e 0/0/4 [sw1-Ethernet0/0/4]port link-ty access [sw1-Ethernet0/0/…

springBoot 配置文件 spring.mvc.throw-exception-if-no-handler-found 参数的作用

在Spring Boot应用中&#xff0c;可以通过配置文件来控制当找不到请求处理器&#xff08;handler&#xff09;时是否抛出异常。具体的配置参数是spring.mvc.throw-exception-if-no-handler-found。 默认情况下&#xff0c;该参数的值为false&#xff0c;即当找不到请求处理器时…

《Zookeeper》源码分析(十四)之 投票是如何发送与接收的

目录 MessengerWorkerSenderWorkerReceiver第5步&#xff1a;检验选票的epoch和version第6步&#xff1a;处理投票 Messenger Messenger管理接收到的消息以及待发送的消息&#xff0c;其源码如下&#xff1a; 它的源码比较简单&#xff0c;接下来着重介绍它维护的两个线程&a…

Docker 网络之 ipvlan 和 macvlan

Docker ipvlan 和 macvlan 引言 本文讲解了Docker 网络模式中的 ipvlan 和 macvlan 的区别,目前自己在生产环境中使用的 ipvlan 模式非常问题.也解决了实际业务问题. IPvlan L2 mode example ipvlan 无需网卡混杂模式 , 运行如下命令后可以生成一个 vlan 子接口 , 会和主网卡…

ElasticSearch的客户端操作

ElasticSearch的客户端操作 1、客户端介绍 官方文档地址&#xff1a; https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html 实际开发中&#xff0c;有多种方式操作Elasticsearch&#xff1a; 客户端工具&#xff1a;发送http请求(RESTful风格)操作…

Azure Blob存储使用

创建存储账户,性能选择标准即可&#xff0c;冗余选择本地冗余存储即可 容器选择类别选择专用即可 可以上传文件到blob中 打开文件可以看到文件的访问路径 4.编辑中可以修改文件 复制链接&#xff0c;尝试访问&#xff0c;可以看到没有办法访问&#xff0c;因为创建容器的时候选…

spring(15) SpringBoot启动过程

目录 一、过程简介二、过程流程图三、源码分析1、运行 SpringApplication.run() 方法2、确定应用程序类型3、加载所有的初始化器4、加载所有的监听器5、设置程序运行的主类6、开启计时器7、将 java.awt.headless 设置为 true8、获取并启用监听器9、设置应用程序参数10、准备环境…

LeetCode450. 删除二叉搜索树中的节点

450. 删除二叉搜索树中的节点 文章目录 [450. 删除二叉搜索树中的节点](https://leetcode.cn/problems/delete-node-in-a-bst/)一、题目二、题解方法一&#xff1a;递归&#xff08;一种麻烦的方法&#xff09;方法二&#xff1a;优化后的递归 一、题目 给定一个二叉搜索树的根…

论文阅读——Imperceptible Adversarial Attack via Invertible Neural Networks

Imperceptible Adversarial Attack via Invertible Neural Networks 作者&#xff1a;Zihan Chen, Ziyue Wang, Junjie Huang*, Wentao Zhao, Xiao Liu, Dejian Guan 解决的问题&#xff1a;虽然视觉不可感知性是对抗性示例的理想特性&#xff0c;但传统的对抗性攻击仍然会产…

每天一道leetcode:1129. 颜色交替的最短路径(图论中等广度优先遍历)

今日份题目&#xff1a; 给定一个整数 n&#xff0c;即有向图中的节点数&#xff0c;其中节点标记为 0 到 n - 1。图中的每条边为红色或者蓝色&#xff0c;并且可能存在自环或平行边。 给定两个数组 redEdges 和 blueEdges&#xff0c;其中&#xff1a; redEdges[i] [ai, bi…