Qt5_在QWidget中畫動態圖

在以前的文章中，我們介紹瞭如何在QTabWidget中畫網絡拓撲圖。今天，我們介紹一下，如何使得所畫的圖呈現出動態的變化，比如在網絡拓撲中，隨着時間的變化，一些節點顯示紅色，一些節點顯示綠色。
準備過程：紅色和綠色的圖片
思路：依舊使用重寫paintevent函數來實現畫圖功能，要使圖片隨着時間的變化更新，就需要使用計時器來觸發頁面更新，頁面更新可以使用update函數。
代碼：

#include "showtopology.h"
#include "mainwindow.h"
#include <QPainter>
#include <QWidget>
#include <QTime>
#include <QTimer>


showtopology::showtopology(QWidget *parent) : QWidget(parent)
{
    QTimer *timer3= new QTimer();//聲明計時器
    connect(timer3,SIGNAL(timeout()),this,SLOT(update()));//計時器用來觸發更新
    timer3->start(1000);//更新間隔爲1秒
}
void showtopology::paintEvent(QPaintEvent *event)
{
    QPainter paint(this);
    paint.setPen(Qt::DashLine);
    paint.setRenderHint(QPainter::Antialiasing, true);
    QPixmap ap1("ap1.png");//AP和兩種STA的圖片的聲明；
    QPixmap img1("STA2.png");
    QPixmap img2("STA1.png");
    paint.drawPixmap(350,150,ap1);

    qsrand(time(NULL));
    int n1;
    double n[50];//一共有50個節點
    for (int i =0; i<50; i++)
        {
        n1= qrand();
        n[i] = n1/10000000.0;
    }
    for(int i = 0; i<50; i++)
        {
        if (n[i]<30)//使某一個節點的隨機數小於30的顯示STA2的圖片
            {
            switch (i)
                    {
                case 0 :paint.drawPixmap(50,20,img1);
                    break;
                case 1: paint.drawPixmap(100,100,img1);
                    break;
                case 2:  paint.drawPixmap(350,200,img1);
                    break;
                case 3: paint.drawPixmap(500,200,img1);
                    break;
                case 4 :paint.drawPixmap(300,75,img1);
                    break;
                case 5 :paint.drawPixmap(503,120,img1);
                    break;
                case 6 :paint.drawPixmap(160,66,img1);
                    break;
                case 7 :paint.drawPixmap(200,190,img1);
                    break;
                case 8: paint.drawPixmap(360,190,img1);
                    break;
                case 9 :paint.drawPixmap(350,180,img1);
                    break;
                default : break;
            }
            paint.drawLine(350,150,50,20);
            paint.drawLine(350,150,100,100);
            paint.drawLine(350,150,350,200);
            paint.drawLine(350,150,500,200);
            paint.drawLine(350,150,300,75);
            paint.drawLine(350,150,503,120);
            paint.drawLine(350,150,160,66);
            paint.drawLine(350,150,200,190);
            paint.drawLine(350,150,360,190);
            paint.drawLine(350,150,350,180);
        }
        else//節點隨機數大於30的顯示STA1的圖片
        {
            switch (i)
                    {
                case 0 :paint.drawPixmap(50,20,img2);//畫STA
                    break;
                case 1: paint.drawPixmap(100,100,img2);
                    break;
                case 2:  paint.drawPixmap(350,200,img2);
                    break;
                case 3: paint.drawPixmap(500,200,img2);
                    break;
                case 4 :paint.drawPixmap(300,75,img2);
                    break;
                case 5 :paint.drawPixmap(503,120,img2);
                    break;
                case 6 :paint.drawPixmap(160,66,img2);
                    break;
                case 7 :paint.drawPixmap(200,190,img2);
                    break;
                case 8: paint.drawPixmap(360,190,img2);
                    break;
                case 9 :paint.drawPixmap(350,180,img2);
                    break;
                default : break;
            }
        paint.drawLine(350,150,50,20);//畫連接線
        paint.drawLine(350,150,100,100);
        paint.drawLine(350,150,350,200);
        paint.drawLine(350,150,500,200);
        paint.drawLine(350,150,300,75);
        paint.drawLine(350,150,503,120);
        paint.drawLine(350,150,160,66);
        paint.drawLine(350,150,200,190);
        paint.drawLine(350,150,360,190);
        paint.drawLine(350,150,350,180);
        }
    }
}

最終的效果如下圖所示：