PyQt5设计圆形水位指示器（QPainter画正弦线，画圆画弧画弦；QFont字体设置；QPainterPath裁剪，QSlider，QCheckbox）

概要

该项目展示了若干样式的圆形水位指示器，包括外圆边框的设计，水位样式设计（水平线or波浪线），弧形进度条的旋转等。该系列样式图外观美观大方，指示清晰。其中波浪线动画的绘制是难点，需特别注意。

成品图

先上成品图

1. 拖拉“当前进度”滑动条，水位指示器会随进度条值的变化而相应变化。
2. 勾选“顺时针”，圆弧进度条沿顺时针方向旋转。反之沿逆时针旋转。
3. 勾选“外边框”，圆形指示器外圈显示有边框。
4. 拖拉“起始角度”滑动条，圆弧进度条的起始位置会有所变化。
5. 共有“圆弧”，“水池”，“波纹”，“圆弧水池”以及“圆弧波纹”五中水位指示器样式供用户选择。

该项目重难点：

1. 六个圆的坐标定位
2. QPainter各种绘图函数
3. 正弦波浪动画的绘制

信号槽连接

信号槽的连接应该放在整个窗口类中，主要的几个信号-槽函数初始化代码如下：

# 初始化信号槽
def initSignal(self)：
    # 两个checkbox
    self.clockwiseCkBox.stateChanged.connect(self.setRotateDirection)
    self.outerFrameCkBox.stateChanged.connect(self.setOuterFrame)
    
    # 5个radiobutton
    self.arcRdBtn.toggled.connect(self.setArc)
    self.poolRdBtn.toggled.connect(self.setPool)
    self.waveRdBtn.toggled.connect(self.setWave)
    self.arcpoolRdBtn.toggled.connect(self.setArcPool)
    self.arcwaveRdBtn.toggled.connect(self.setArcWave)
   
    # 两个slider
    self.processSlider.valueChanged.connect(self.setProcess)
    self.angleSlider.valueChanged.connect(self.setStartAngle)

paintEvent重绘

painterEvent设置坐标轴，并调用绘制各部分元素的函数。

def paintEvent(self, event):

    # 1. 坐标变换
    width = self.width()
    height = self.height()
    side = min(width, height)

    # 2. 绘制准备工作, 启用反锯齿, 平移坐标轴中心, 等比例缩放
    painter = QtGui.QPainter(self)
    painter.setRenderHints(QtGui.QPainter.Antialiasing | QtGui.QPainter.TextAntialiasing)
    painter.translate(width / 2, height / 2)
    painter.scale(side / 200.0, side / 200.0)
    
    # 3. 绘制固定元素
    self.drawInnerCircle(painter)    # 绘制内圆
    
    # 4. 绘制可变元素，即勾选不同选项所应绘制的样式
    if self.arcStyle:                              # 如果画的是arcStyle，则1看方向，2看是否有外边框
        if self.clockwise:
            self.drawClockwiseArc(painter)         # 顺时针
        else:
            self.drawCounterclockwiseArc(painter)  # 逆时针
        if self.outerFrame:                        # 有无边框
            self.drawOuterFrame(painter)

    elif self.poolStyle:                           # 如果是poolStyle，则默认有边框
        self.drawO