Qt自定义控件之仪表盘3--雷达扫描图

1、设计思想

雷达扫描图，在影视作品中见到较多，比如飞机雷达、舰艇雷达，有一个扫描线转圈代表雷达一周旋转或一个批次的收发，发现目标就在表盘上标记位置。和汽车仪表盘类似，汽车仪表盘有底盘背景图、同圆、刻度、刻度值、旋转的指针。能在汽车仪表盘的基础上略作修改，比如指针换成带有余辉的扫描扇面，就能完成一个雷达扫描图。

代码实现原理：
上图的扫描线和余辉效果，可以使用QConicalGradient 函数来实现，qconicalgradient()提供的是一种扇形渐变效果，圆锥式渐变或称角度渐变。用这个渐变色来填充drawPie函数就可以实现扇形选择的余辉。

QConicalGradient::QConicalGradient(qreal cx, qreal cy, qreal angle)

void QPainter::drawPie(const QRectF &rectangle, int startAngle, int spanAngle)

Qt大神刘典武文章中有典型的讲解，《Qt编写自定义控件62-探探雷达》中实现的扫描效果就是雷达的效果。详情移步https://zhuanlan.zhihu.com/p/85512788。

2、代码实现

绘制同心圆，x和y轴实线，45度对角线虚线。

void Radar::drawCircle(QPainter *painter)

{

    painter->save();

    QColor color = QColor(, , );

    QPen pen = QPen(color, );

    painter->setPen(pen);

   for(int i=; i<; i++)

   {

       int r =  this->radius /  * (i+);

       painter->drawEllipse(-r, -r, r * , r * );

   }

   for(int i=; i<=; i++) // x,y 轴线是实线

   {

       int r = this->radius;

       if((i%) == ) {

           pen.setStyle(Qt::SolidLine);

       }

       else{

           pen.setStyle(Qt::DashDotLine);

           //pen.setDashPattern(QVector<qreal>() << 10 << 2 ); //实线：空线的比例

       }

       painter->setPen(pen);

       painter->drawLine(-r, , r, );

       painter->rotate(/);

   }

    painter->restore();

}

绘制扫描图，依靠锥形渐变颜色,通过透明度控制形成扫描效果，然后绘制饼图。

void Radar::drawScan(QPainter *painter)

{

    painter->save();

    //锥形渐变颜色,通过透明度控制形成扫描效果

    QConicalGradient conicalGradient(, , this->angle);

    QColor color = QColor(,,);

    color.setAlpha();

    conicalGradient.setColorAt(, color);

    color.setAlpha();

    conicalGradient.setColorAt(0.1, color);

    color.setAlpha();

    conicalGradient.setColorAt(, color);

    //绘制饼圆

    QPen pen;

    pen.setWidth();

    pen.setBrush(conicalGradient);

    painter->setPen(pen);

    painter->setBrush(conicalGradient);

    int r =  this->radius;

    QRect rect(-r, -r, r * , r * );

    painter->drawPie(rect, this->angle * ,  * ); // 1/16th of a degree

    painter->restore();

}

给雷达加上模拟的扫描目标，实现起来很简单，就是打点。

void Radar::drawPoints(QPainter *painter)

{

    painter->save();

    QColor color = QColor(, , );

    QPen pen = QPen(color, );

    painter->setPen(pen);

    painter->setBrush(color);

    for(int i=; i<this->points.count(); i++)

    {

        int r =  ;

        QRect rect(points[i].x() - r/, points[i].y() - r/, r * , r * );

        painter->drawEllipse(rect); // 1/16th of a degree

    }

    painter->restore();

}

最终效果如下。

外层怎么调用？使用信号和槽驱动Radar类对象。

RadarScan::RadarScan(QWidget *parent)

    : QMainWindow(parent)

    , ui(new Ui::RadarScan)

{

    ui->setupUi(this);

    // start and stop

    connect(this, &RadarScan::radar_state_changed,

            ui->radar, &Radar::radar_start_control);

    connect(ui->startButton, &QPushButton::clicked, [=](){

        emit radar_state_changed(true);

    });

    connect(ui->stopButton, &QPushButton::clicked, [=](){

        emit radar_state_changed(false);

    });

    // speed control

    connect(this, &RadarScan::radar_speed_changed,

            ui->radar, &Radar::radar_speed_control);

    connect(ui->fastButton, &QPushButton::clicked, [=](){

        emit radar_speed_changed(true);

    });

    connect(ui->slowButton, &QPushButton::clicked, [=](){

        emit radar_speed_changed(false);

    });

    connect(ui->randomButton, &QPushButton::clicked, ui->radar, &Radar::radar_random_point);

}

3、效果演示

尊重技术文章，转载请注明！

Qt自定义控件之仪表盘2--QPaint绘制仪表盘

https://www.cnblogs.com/pingwen/p/13426304.html

巴特西

Qt自定义控件之仪表盘3--雷达扫描图

2、代码实现

3、效果演示

最新文章

热门文章