使用PyQt5绘制水波浪形的柱状显示流量—学习QTimer+QPainterPath

前言：进入学习Python开发上位机界面的第二阶段，学习如何开发自定义控件，从常用的控件入手学习，本期主要学习如何使用PyQt5绘制水波浪形的柱状显示流量。但是最后我放弃了，因为水波的效果达不到我想要的。

1. 明确想要实现的控件效果

我想实现的效果是制作一个水波浪形的柱状控件用于显示流量。

要想实现的效果如下：

先来拆解需求：
明确水波浪形的柱状图需要具备的属性：
（1）用户设置流量数值，柱状图的水波能够到达相应的水平线；
（2）显示流量的水波柱的背景颜色应该允许用户设置；
（3）显示流量的水波柱的波浪浮动应该是两个波浪浮动曲线组成的，并且可以通过颜色的深浅看出是两个水波浪浮动，下层水波浪颜色深些；

2. 搬运代码

一个漂亮的水波浪动画效果：

附上可以直接运行的Python代码：

import sys
import math
from PyQt5.QtWidgets import QApplication, QWidget
from PyQt5.QtGui import QPainter, QColor, QPen
from PyQt5.QtCore import Qt, QRect, QTimerclass WaterWaveWidget(QWidget):def __init__(self):super().__init__()self.setGeometry(100, 100, 800, 400)self.setWindowTitle("Water Wave Flow Meter")self.wave1_amplitude = 50  # Amplitude for the first waveself.wave2_amplitude = 30  # Amplitude for the second waveself.wave_length = 200  # Length of one wave cycleself.phase_shift = 0  # Phase shift between the two wavesself.offset_x = 0  # Horizontal offset for animationself.timer = QTimer(self)self.timer.timeout.connect(self.update_wave)self.timer.start(100)  # Update every 100 millisecondsdef update_wave(self):self.offset_x += 5  # Move the wave horizontallyif self.offset_x > self.wave_length:self.offset_x = 0self.update()def paintEvent(self, event):painter = QPainter(self)rect = self.rect()# Draw backgroundpainter.fillRect(rect, QColor(200, 200, 200))# Draw the two wavespen1 = QPen(QColor(0, 100, 200), 2)  # Deep blue for the lower wavepen2 = QPen(QColor(173, 216, 230), 2)  # Light blue for the upper wavepainter.setPen(pen1)for x in range(rect.left(), rect.right(), 10):y1 = rect.bottom() - int(self.wave1_amplitude* math.sin((x - self.offset_x) / self.wave_length * 2 * math.pi))y2 = rect.left() + xpainter.drawLine(y2, rect.bottom(), y2, y1)painter.setPen(pen2)for x in range(rect.left(), rect.right(), 10):y1 = rect.bottom() - int(self.wave2_amplitude* math.sin(((x - self.offset_x) / self.wave_length + self.phase_shift)* 2* math.pi))y2 = rect.left() + xpainter.drawLine(y2,y1 if y1 > rect.top() else rect.top(),y2,rect.bottom() if y1 < rect.bottom() else y1,)painter.end()if __name__ == "__main__":app = QApplication(sys.argv)widget = WaterWaveWidget()widget.show()sys.exit(app.exec_())

3. 学到的知识点

3.1 QTimer定时器

参考文章：Qt 定时器 (QTimer)的几种使用方法

使用QTimer定时器类（这种方法普遍使用）

1. 首先创建一个定时器类的对象

• QTimer *timer = new QTimer(this);

2. timer 超时后会发出timeout()信号，所以在创建好定时器对象后给其建立信号与槽

• connect(timer, SIGNAL(timeout()), this, SLOT(onTimeout()));

3. 在需要开启定时器的地方调用

• void QTimer::start ( int msec );

• 这个start函数参数也是毫秒级别；

• timer->start(msec );

 self.timer = QTimer(self)self.timer.timeout.connect(self.update_wave)self.timer.start(50)  # 每50毫秒更新一次

3.2 QPainterPath绘制路径

参考文章：QPainter和QPainterPath理解

QPainterPath 类（绘图路径）提供了一个容器，用于绘图操作，可以创建和重用图形形状。

绘图路径是由许多图形化的构建块组成的对象，例如：矩形、椭圆、直线和曲线。构建块可以加入在封闭的子路径中，例如：矩形或椭圆。封闭的路径的起点和终点是一致的，或者他们可以作为未封闭的子路径独立存在，如：直线和曲线。

QPainterPath 可以被填充、描绘轮廓、裁剪。要为一个指定的绘图路径生成可填充的轮廓，可以使用 QPainterPathStroker 类。与正常绘图相比，QPainterPath 的主要优点在于：复杂的图形只需创建一次，然后只需调用 QPainter::drawPath() 函数即可绘制多次。

QPainterPath 提供了一组函数，可用于获取绘图路径及其元素的信息。除了可以使用 toReversed() 函数来改变元素的顺序外，还有几个函数将 QPainterPath 对象转换成一个多边形表示。

moveTo()

void moveTo(const QPointF &point)
void moveTo(qreal x, qreal y)

把起始点移动到（x,y）

lineTo()

绘制直线

void QPainterPath::lineTo(qreal x, qreal y)

从当前点画一条直线到（x,y）点

closeSubpath()

void closeSubpath()

通过在子路径的开始处画一条线来关闭当前子路径，并自动启动一个新路径。新路径的当前点为(0,0)。如果子路径不包含任何元素，则此函数不执行任何操作。