Qt总结之七：QPaintEvent绘制雷达图（二）

前言

这里使用另一套框架写的雷达扫描图

这里PaintEvent事件比上一个版本写的好，但是不喜欢Widget嵌套的方式，后续会把两个版本整合到一起。

一、实现原理

雷达效果包括三个部分：背景、转动的扇形和闪烁的点。
（1）背景的实现很简单，首先填充背景色，然后绘制横纵坐标轴以及三个同心圆。代码如下：

//背景painter.fillRect(rect(),QColor(15,45,188));//边长int len = m_drawArea.width();//底盘(x轴、y轴和3个圆)painter.setPen(QPen(Qt::white));painter.drawLine(m_drawArea.topLeft() + QPoint(0,len/2),m_drawArea.topRight() + QPoint(0,len/2));painter.drawLine(m_drawArea.topLeft() + QPoint(len/2,0),m_drawArea.bottomLeft() + QPoint(len/2,0));painter.drawEllipse(m_drawArea.center(),len/2,len/2);painter.drawEllipse(m_drawArea.center(),len/3,len/3);painter.drawEllipse(m_drawArea.center(),len/6,len/6);

在这里有个m_drawArea是用来描述绘制雷达的区域的。先确定这个绘制区域，更容易计算绘制的内容。 m_drawArea的大小在resizeEvent事件中确定。

void CRadar::resizeEvent(QResizeEvent *event)
{//以较短的边长作为绘制区域边长if(width() > height()){m_drawArea = QRect((width() - height())/2,0,height(),height());}else{m_drawArea = QRect(0,(height() - width())/2,width(),width());}m_drawArea.adjust(10,10,-10,-10);
}

为了确保雷达为圆形，我们以较短的边作为矩形的边长。然后使用adjust缩小一点。adjust前两个参数为左上角x和y的增量，后两个参数为右下角x和y的增量。

（2）转动部分由一个扇形和一条直线组成。扇形使用了锥形渐变色。代码如下：

    //转动部分//---//线qreal x = m_drawArea.center().x() + (qreal)len/2 * cos(-m_pieRotate*3.14159/180);qreal y = m_drawArea.center().y() + (qreal)len/2 * sin(-m_pieRotate*3.14159/180);painter.setPen(QPen(Qt::white));painter.drawLine(m_drawArea.center(),QPointF(x,y));//----//扇形QConicalGradient gradient;gradient.setCenter(m_drawArea.center());gradient.setAngle(m_pieRotate + 180); //渐变与旋转方向恰好相反，以扇形相反的边作为渐变角度。gradient.setColorAt(0.4,QColor(255,255,255,100)); //从渐变角度开始0.5 - 0.75为扇形区域，由于Int类型计算不精确，将范围扩大到0.4-0.8gradient.setColorAt(0.8,QColor(255,255,255,0));painter.setBrush(QBrush(gradient));painter.setPen(Qt::NoPen);painter.drawPie(m_drawArea,m_pieRotate*16,90*16);

直线的绘制很简单，只需要计算转动角度对应圆上的点的坐标即可。扇形的绘制也很简单。难点在于渐变色的应用，由于锥形渐变是逆时针的，而我们的雷达是顺时针的转动。所以要计算好扇形区域在渐变的哪个范围。这里设置了渐变角度为扇形角度旋转180度，那么扇形区域应该在渐变角度的0.5 - 0.75范围内。由于这里使用的是int类型，怕计算的不精确，将渐变颜色的范围设置大一些。

（3）第三部分是随机闪烁的点，用来点缀。在这里使用了一个list存放点的坐标，另一个list存放这些点的颜色alapha值。使用一个定时器随机改变这些点的坐标值和alapha值。


void CRadar::timerEvent(QTimerEvent *event)
{if(m_timerId == event->timerId()){m_pieRotate -= 10;update();}else if(m_pointTimerId == event->timerId()){//随机更换装饰的点for(int i = 0; i < m_points.count(); ++i){int offsetX = rand()%m_drawArea.width();int offsetY = rand()%m_drawArea.width();int alapha = rand()%255;m_points.replace(i,QPoint(offsetX,offsetY) + m_drawArea.topLeft());m_pointsAlapha.replace(i,alapha);}update();}
}

第一个定时器是用来改变转动部分的角度的。第二个定时器才是用来改变闪烁点的。

二、代码区

radar.h

#ifndef RADAR_H
#define RADAR_H#include <QWidget>class Radar : public QWidget
{Q_OBJECTpublic:Radar(QWidget *parent);~Radar();
protected:void paintEvent(QPaintEvent *event);    //绘制事件void resizeEvent(QResizeEvent *event);  //大小重置事件void timerEvent(QTimerEvent *event);    //定时器事件
private:QRect         m_drawArea;      //绘制区域int           m_pieRotate;     //扇形旋转区域int           m_timerId;       //定时器IDint           m_pointTimerId;  //变更点定时器int           m_nSpeed;        //速度QList<QPoint> m_points;        //绘制点QList<int>    m_pointsAlapha;  //绘制点颜色alapha值};#endif // RADAR_H

radarscannice.h

#ifndef RADARSCANNICE_H
#define RADARSCANNICE_H#include <QtWidgets/QWidget>
#include "ui_radarscannice.h"class RadarScanNice : public QWidget
{Q_OBJECTpublic:RadarScanNice(QWidget *parent = 0);~RadarScanNice();private:Ui::RadarScanNiceClass ui;
};#endif // RADARSCANNICE_H

radar.cpp

#include "radar.h"
#include <QPainter>
#include <QTimerEvent>
#include <QConicalGradient>
#include <qDebug>Radar::Radar(QWidget *parent): QWidget(parent)
{//初始化m_pieRotate = 0;m_timerId = -1;m_nSpeed = 50;m_points << QPoint() << QPoint() << QPoint() << QPoint() << QPoint();m_pointsAlapha << 100 << 100 << 100 << 100 << 100;//启动定时器m_timerId = startTimer(m_nSpeed);m_pointTimerId = startTimer(1200);
}Radar::~Radar()
{}
void Radar::paintEvent(QPaintEvent *event)
{QPainter painter(this);//抗锯齿painter.setRenderHint(QPainter::Antialiasing);//背景painter.fillRect(rect(), QColor(15, 45, 188));//边长int len = m_drawArea.width();//底盘(x轴、y轴和3个圆)painter.setPen(QPen(Qt::white));painter.drawLine(m_drawArea.topLeft() + QPoint(0, len / 2), m_drawArea.topRight() + QPoint(0, len / 2));painter.drawLine(m_drawArea.topLeft() + QPoint(len / 2, 0), m_drawArea.bottomLeft() + QPoint(len / 2, 0));painter.drawEllipse(m_drawArea.center(), len / 2, len / 2);painter.drawEllipse(m_drawArea.center(), len / 3, len / 3);painter.drawEllipse(m_drawArea.center(), len / 6, len / 6);//转动部分//---//线qreal x = m_drawArea.center().x() + (qreal)len / 2 * cos(-m_pieRotate*3.14159 / 180);qreal y = m_drawArea.center().y() + (qreal)len / 2 * sin(-m_pieRotate*3.14159 / 180);painter.setPen(QPen(Qt::white));painter.drawLine(m_drawArea.center(), QPointF(x, y));//----//扇形QConicalGradient gradient;gradient.setCenter(m_drawArea.center());gradient.setAngle(m_pieRotate + 180); //渐变与旋转方向恰好相反，以扇形相反的边作为渐变角度。gradient.setColorAt(0.4, QColor(255, 255, 255, 100)); //从渐变角度开始0.5 - 0.75为扇形区域，由于Int类型计算不精确，将范围扩大到0.4-0.8gradient.setColorAt(0.8, QColor(255, 255, 255, 0));painter.setBrush(QBrush(gradient));painter.setPen(Qt::NoPen);painter.drawPie(m_drawArea, m_pieRotate * 16, 90 * 16);//装饰-随机点for (int i = 0; i < m_points.count(); ++i){int colorAlaph = m_pointsAlapha.at(i);painter.setPen(QPen(QColor(255, 255, 255, colorAlaph), 3));painter.drawPoint(m_points.at(i));}
}void Radar::resizeEvent(QResizeEvent *event)
{//以较短的边长作为绘制区域边长if (width() > height()){m_drawArea = QRect((width() - height()) / 2, 0, height(), height());}else{m_drawArea = QRect(0, (height() - width()) / 2, width(), width());}m_drawArea.adjust(10, 10, -10, -10);
}void Radar::timerEvent(QTimerEvent *event)
{if (m_timerId == event->timerId()){m_pieRotate -= 10;update();}else if (m_pointTimerId == event->timerId()){//随机更换装饰的点for (int i = 0; i < m_points.count(); ++i){int offsetX = rand() % m_drawArea.width();int offsetY = rand() % m_drawArea.width();int alapha = rand() % 255;m_points.replace(i, QPoint(offsetX, offsetY) + m_drawArea.topLeft());m_pointsAlapha.replace(i, alapha);}update();}
}

radarscannice.cpp

#include "radarscannice.h"
#include "radar.h"RadarScanNice::RadarScanNice(QWidget *parent): QWidget(parent)
{ui.setupUi(this);Radar* radar = new Radar(this);radar->setFixedSize(300, 300);radar->move(150, 50);
}RadarScanNice::~RadarScanNice()
{}

main.cpp

#include "radarscannice.h"
#include <QtWidgets/QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);RadarScanNice w;w.show();return a.exec();
}

效果图：