目录

 1.简易雷达图思维导图

2.结果展示图

3.制作流程

3.1表盘的绘制        

3.1.1 绘制底色

​编辑 3.1.2 绘制大圆

 3.3.3绘制小圆

3.3.4 绘制小圆的内容

3.3.5 绘制表盘刻度和数字标注

 3.3.6 绘制指针

 3.3.7 绘制扇形

3.2 设置定时器让表盘动起来

3.3.1 设置动态指针

 3.2.2 更新扇形区域

---

 1.简易雷达图思维导图

 

2.结果展示图

3.制作流程

3.1表盘的绘制        

创建Qt ->widget下项目接口。

        本示例使用的Qt 中的事件，所以，第一步重写 paintEvent()

widget.h 中添加

      Widget.cpp 中添加

void Widget:: paintEvent(QPaintEvent *event){}

3.1.1 绘制底色

        创建一个Qpainter 的类（this表明在最外面的窗口上绘制)，同时alt+enter 导入头文件（不能导入，手动添加对应的头文件）

接下来设置抗锯齿，设置画刷颜色，最后绘制底层的矩形。

 3.1.2 绘制大圆

首先明确Qt的坐标

painter.translate 将坐标图的原点移动某一点。

进行变换之后做一个径向渐变，作为画刷来绘制大圆的圆内色。 最后绘制大圆

painter.setBrush(Qt::NoBrush);表明在接下绘制的圆形的内部不进行颜色覆盖。保留和大圆相同的颜色，只绘制小圆的轮廓即可。

 3.3.3绘制小圆

Qt中设置绘图时的画刷为无画刷，即不填充任何颜色或图案。这意味着在绘制图形时，不会使用画刷填充图形的内部，而只会绘制图形的轮廓。

通常情况下，当需要绘制只有轮廓而没有填充的图形时，可以使用 setBrush(Qt::NoBrush) 来设置画刷，以确保绘制的图形只有轮廓效果。

设置画刷和画笔，并进行绘制

3.3.4 绘制小圆的内容

 

在小圆内输入内容显示当前的速度，当然需要设置字体和brush ，最后使用drawText() ，其常用的构造函数有两个一个是，需要写字的(x,y） 和内容，另一个是输入一个QRect() ，在Rect内部中央进行书写。

3.3.5 绘制表盘刻度和数字标注

 首先保留现在的坐标位置信息

painter.save() 和painter.restore() 。

接下来进行旋转135都。painter.rotate() 进行顺时针旋转。

蓝色坐标处。此时，我们已经找到了刻度开始的起点了。

 

从start 到end 一共(360-90)=270°。我们希望其可以均分未50分，所以每一份角度是double（270/50）=angle.

此时就可以绘制刻度了

使用drawline()

起始的坐标是大圆的半径就是（height/2-3,0) ,其中-3 是裕量，具体值根据调试微调。重点是（height/2-20,0) ，其中-20是未来显示刻度线出来，接下来painter.rotate(angle).循环50词即可。

接下里是数字标注，为了显示清晰，每10次显示一下标注。调用一下drawText

 3.3.6 绘制指针

由于上面绘制刻度坐标信息打乱了，我希望角度位置信息恢复到rect.center() 状态。故使用

painter.restore() 恢复上调用painter.save()一个状态。

 同时绘制指针。

 3.3.7 绘制扇形

回到最原始的状态

3.2 设置定时器让表盘动起来

3.3.1 设置动态指针

 需要设置定时器，在.h 定义，.cpp 实现（private 属性），并定义currentValue 用于显示当前的值。使用信号与槽，如果定时器时间到了，更新currentValue（paintEvent 里面很多draw 函数和currentValue 相关，更新了值画面也就动起来）。由于表盘达到最大会反方向运行，所以需要设定一给bool 值用于判定指针方向，完成之后，调用update() 更新painterEvent 就可以东起来。最后将启动定时器，即可。

 3.2.2 更新扇形区域

同上。currentValue 更新即可。

3.3 完整代码

main.cpp

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

Widget.h

 

#ifndef WIDGET_H
#define WIDGET_H#include <QTimer>
#include <QWidget>QT_BEGIN_NAMESPACE
namespace Ui { class Widget; }
QT_END_NAMESPACEclass Widget : public QWidget
{Q_OBJECTpublic:Widget(QWidget *parent = nullptr);~Widget();protected:void paintEvent(QPaintEvent *event) override;private:Ui::Widget *ui;int currentValue;QTimer *timer;int mark=0;
};
#endif // WIDGET_H

Widget.cpp 

#include "widget.h"
#include "ui_widget.h"
#include<QDebug>
#include<QRadialGradient>
#include <QPainter>
#include<QFont>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);currentValue=0;timer=new QTimer();connect(timer,&QTimer::timeout,[=](){if(mark==0){currentValue++;if(currentValue>=51){mark=1;}}else if(mark==1){currentValue--;if(currentValue<=0){mark=0;}}update();});timer->setInterval(50);timer->start();
}Widget::~Widget()
{delete ui;
}void Widget:: paintEvent(QPaintEvent *event){QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);painter.setBrush(QBrush(Qt::black));painter.drawRect(rect());painter.translate(rect().center());//    qDebug()<<width()<<height();QRadialGradient radialGradient(0,0,height()/2);radialGradient.setColorAt(0.0,QColor(255,0,0,50));radialGradient.setColorAt(1.0,QColor(255,0,0,250));painter.setBrush(QBrush(radialGradient));painter.setPen(Qt::white);painter.drawEllipse(QPoint(0,0),height()/2,height()/2);//painter.setBrush(Qt::NoBrush);QPen pen(Qt::white,3);painter.setPen(pen);painter.drawEllipse(QPoint(0,0),60,60);painter.setFont(QFont("华文宋体",15));painter.drawText(QRect(-60,-60,120,120),Qt::AlignCenter,QString::number(currentValue));painter.save();//旋转是按照顺时针进行旋转的从左到右进行旋转painter.rotate(135);double rotate=270*1.0/50;for(int i=0;i<=50;i++){if(i%10==0){//在表盘的左侧，需要先将文字旋转180°，在进行写字，之后进行变换。if(135+rotate*i<=270){painter.rotate(180);painter.drawText(-height()/2+25,7,QString::number(i));painter.rotate(-180);}else{//在 坐标x,y 进行写字绘图。  如果是构造函数是矩形的话，那么就在矩形 的内部进行绘图和构造。painter.drawText(height()/2-50,7,QString::number(i));}}painter.drawLine(height()/2-20,0,height()/2-3,0);painter.rotate(rotate);}painter.restore();painter.save();painter.rotate(135+rotate*currentValue);painter.drawLine(60,0,height()/2-55,0);//绘制扇形painter.restore();painter.setPen(Qt::NoPen);painter.setBrush(QColor(255,0,0,150));QRect rectangle(-height()/2+58,-height()/2+58,height()-116,height()-116);painter.drawPie(rectangle,(360-135)*16,-rotate*currentValue*16);}

没有自定义ui，直接在原图上进行绘画.