qt自定义控件4--进度条控件_qt 进度条 显示图片

一、qt自定义控件4–进度条控件效果展示

二、原理说明

绘制过程大致分为5步：
1.绘制整个页面背景（如果要用在其他窗体上则忽略此步骤，并设置背景透明）。
2.绘制文字(“占用率”)和百分比。
3.绘制2个上下对称的梯形(进度条的两边部分)以及若干个平行四边形(进度条的中间部分)，颜色为黑色背景。
4.绘制进度条的渐变边框。
5.根据具体占用率计算应该填充的进度，注意填充的块可能是三角形，梯形，五边形，平行四边形，需要根据进度判断；

三、代码展示

class ProgressBar : public QWidget
{
    Q_OBJECT
public:
    explicit ProgressBar(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);



    void drawPolygonBackground(QPointF topLeft,
                               QPointF bottomLeft,
                               QPointF bottomRight,
                               QPointF topRight,
                               QPainter *painter);
    void drawPolygonShadowground( QPointF topLeft,
                                QPointF bottomLeft,
                                QPointF bottomRight,
                                QPointF topRight,
                                QPainter *painter);

    void drawPolygonUseground(QPolygonF polygon,
                              QPainter *painter);

private:
    QString backgroundColor = "#ffe228";

    int polygonNum = 10; //多边形数
    double polygonHeightScale = 0.25;
    double value = 0.58; //概率

    QString title = QStringLiteral("占用率");
    int space = 4;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

void ProgressBar::paintEvent(QPaintEvent *)
{
    //绘制准备工作,启用反锯齿
    QPainter painter(this);

    //绘制背景
    QPainterPath path;
    path.addRect(QRectF(rect()));
    painter.setOpacity(1);
    painter.fillPath(path, QColor(4,44,54));

    //绘制文字 "占用率"
    painter.setPen(QColor("#ffffff"));
    int fontSize = this->height() * (1 - polygonHeightScale) - space*2;
    QFont fontTitle("Source Han Sans CN", fontSize, QFont::Bold, false);
    painter.setFont(fontTitle);
    QPointF textPot(0,fontSize + space);
    painter.drawText(textPot, title);

    //绘制进度百分比文字
    painter.setPen(QColor("#ffe228"));
    QString percent = QString::number(value*100);
    QPointF percentPot(this->width() - fontSize *3 ,fontSize + space);
    painter.drawText(percentPot, QString("%1%").arg(percent));

    double polygonWidth = (double)this->width() / (1.5*polygonNum -1);

    int useWidth = this->width() * value;

    for(int i = 0; i < polygonNum; i++)
    {
        int topStartX = polygonWidth*1.5*i;
        int topEndX = polygonWidth + polygonWidth*1.5*i;
        int bottomStartX;
        int bottomEndX;
        if(i == 0)
        {
            bottomStartX = 0;
            bottomEndX = polygonWidth*0.5;
        }
        else {
            bottomStartX = polygonWidth*1.5*i - polygonWidth*0.5;
            bottomEndX = bottomStartX + polygonWidth;
        }


        QPointF topLeft(topStartX, (1-polygonHeightScale)*this->height());
        QPointF bottomLeft(bottomStartX, this->height());
        QPointF bottomRight(bottomEndX, this->height());
        QPointF topRight(topEndX, (1-polygonHeightScale)*this->height());

        //画四边形内部背景
        drawPolygonBackground(topLeft, bottomLeft, bottomRight, topRight, &painter);
        //画四边形边框渐变背景
        drawPolygonShadowground(topLeft, bottomLeft, bottomRight, topRight, &painter);
        //画占用进度
        if(bottomStartX < useWidth)
        {
            //三角形
            if(topStartX > useWidth)
            {
                topLeft.setX(useWidth);
                double currentHeight = (useWidth - bottomStartX)* polygonHeightScale*this->height() /(topStartX -bottomStartX) ;
                topLeft.setY(this->height() - currentHeight);
                bottomRight.setX(useWidth);
                QPolygonF pf;
                pf << topLeft << bottomLeft << bottomRight;
                drawPolygonUseground(pf, &painter);
            }
            else if (topStartX < useWidth && bottomEndX > useWidth) {
                topRight.setX(useWidth);
                bottomRight.setX(useWidth);
                QPolygonF pf;
                pf << topLeft << bottomLeft << bottomRight << topRight;
                drawPolygonUseground(pf, &painter);
            }
            else if (bottomEndX < useWidth && useWidth < topEndX) {
                double currentHeight = (topEndX - useWidth)* polygonHeightScale*this->height() /(topEndX -bottomEndX) ;
                QPointF pTopRight(useWidth, (1-polygonHeightScale)*this->height());
                QPointF pBottomRight(useWidth, (1-polygonHeightScale)*this->height() + currentHeight);
                QPolygonF pf;
                pf << topLeft << bottomLeft << bottomRight << pBottomRight << pTopRight;
                drawPolygonUseground(pf, &painter);
            }
            else {
                QPolygonF pf;
                pf << topLeft << bottomLeft << bottomRight << topRight;
                drawPolygonUseground(pf, &painter);
            }
        }

    }
}

void ProgressBar::drawPolygonBackground(QPointF topLeft,
                                        QPointF bottomLeft,
                                        QPointF bottomRight,
                                        QPointF topRight,
                                        QPainter *painter)
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing, true);
    QColor color("#000000");
    painter->setBrush(color);
    QPolygonF polygon;
    polygon << topLeft << bottomLeft << bottomRight << topRight;
    painter->drawPolygon(polygon);

    painter->restore();
}

void ProgressBar::drawPolygonShadowground(QPointF topLeft, QPointF bottomLeft, QPointF bottomRight, QPointF topRight, QPainter *painter)
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing, true);
    int x1 = topLeft.x(), y1 = topLeft.y();
    int x2 = bottomLeft.x(), y2 = bottomLeft.y();
    int x3 = bottomRight.x(), y3 = bottomRight.y();
    int x4 = topRight.x(), y4 = topRight.y();
    QColor color(backgroundColor);
    painter->setBrush(Qt::NoBrush);
    for (int i = 0; i < 10; i++)
    {
        color.setAlpha(120 - qSqrt(i) * 60);
        painter->setPen(color);

        QPointF pTopLeft;
        QPointF pBottomLeft;
        QPointF pBottomRight;
        QPointF pTopRight;
        pTopLeft.setX(x1 + i); pTopLeft.setY(y1 + i);
        pBottomLeft.setX(x2 + i); pBottomLeft.setY(y2 - i);
        pBottomRight.setX(x3 - i); pBottomRight.setY(y3 - i);
        pTopRight.setX(x4 - 2*i); pTopRight.setY(y4 + i);
        QPolygonF polygon;
        polygon << pTopLeft << pBottomLeft << pBottomRight << pTopRight;
        painter->drawPolygon(polygon);
    }

    painter->restore();
}

void ProgressBar::drawPolygonUseground(QPolygonF polygon, QPainter *painter)
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing, true);
    QColor color(backgroundColor);
    painter->setBrush(color);
    painter->drawPolygon(polygon);

    painter->restore();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153