Qt/C++开源控件 自定义雷达控件

2024-10-04 07:18:49

使用Qt框架创建一个简单的雷达图，包含动态扫描、目标点生成、刻度和方向标识。代码实现使用C++编写，适合用作学习和扩展的基础。
在这里插入图片描述

1. 头文件与基本设置
#include "RadarWidget.h"
#include <QPainter>
#include <QPen>
#include <QBrush>
#include <cmath>
#include <cstdlib>
#include <ctime>
  • 头文件包含：包含必要的Qt模块和C++标准库，如 QPainter 用于绘制图形，cmath 用于数学计算，cstdlib 和 ctime 用于随机数生成。
  • 自定义类：RadarWidget 继承自 QWidget，表示一个自定义的绘制控件。
2. 构造函数
RadarWidget::RadarWidget(QWidget *parent)
    : QWidget(parent), angle(0), maxTargets(5) {
    // 初始化随机数种子
    std::srand(std::time(nullptr));

    // 创建定时器来更新角度
    timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, &RadarWidget::updateAngle);
    timer->start(50);  // 设置定时器间隔为50ms

    // 每隔一段时间生成随机目标点
    QTimer *targetTimer = new QTimer(this);
    connect(targetTimer, &QTimer::timeout, this, &RadarWidget::generateRandomTargets);
    targetTimer->start(2000);  // 每2秒生成一次新的随机目标点
}
  • 初始化：构造函数设置初始的角度为0和最大目标数为5。
  • 随机数种子：使用当前时间初始化随机数生成器，以便每次运行时产生不同的目标点。
  • 定时器：
    • 扫描角度更新：每50毫秒调用 updateAngle 方法，更新雷达的扫描角度。
    • 目标点生成：每2秒调用 generateRandomTargets 方法，生成新的目标点。
3. 画图事件
void RadarWidget::paintEvent(QPaintEvent *) {
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.fillRect(rect(), Qt::black);
  • 画图事件：重载 paintEvent 方法是自定义绘制的核心。
  • 画笔设置：使用 QPainter 来进行绘制，开启抗锯齿以改善绘图质量。
  • 背景填充：将控件背景填充为黑色。
4. 获取控件的中心和半径
    int w = width();
    int h = height();
    int radius = qMin(w, h) / 2 * 0.9;  // 设置半径，防止绘制到最边缘
    QPoint center(w / 2, h / 2);
  • 尺寸计算：获取控件的宽度和高度。
  • 半径设置：计算半径为控件最小边长的一半，乘以0.9以避免绘制到边缘。
  • 中心点：确定雷达图的中心位置。
5. 绘制背景网格和圆形网格
    // 绘制背景网格
    painter.setPen(QPen(QColor(0, 255, 0, 50), 1));  // 绿色网格线
    int gridSize = 20;
    for (int i = 0; i <= w; i += gridSize) {
        painter.drawLine(i, 0, i, h);  // 垂直网格线
        painter.drawLine(0, i, w, i);  // 水平网格线
    }

    // 绘制雷达的圆形网格
    painter.setPen(QPen(QColor(0, 255, 0), 1));
    for (int i = 1; i <= 5; ++i) {
        painter.drawEllipse(center, radius * i / 5, radius * i / 5);
    }
  • 背景网格：绘制绿色背景网格线，以每20像素为间隔，增强视觉效果。
  • 圆形网格：绘制5个同心圆，帮助标识距离。
6. 绘制中心十字线和方向线
    // 绘制十字网格线
    painter.drawLine(center.x() - radius, center.y(), center.x() + radius, center.y());
    painter.drawLine(center.x(), center.y() - radius, center.x(), center.y() + radius);

    // 绘制八条方向线
    static const int directions[8] = {0, 45, 90, 135, 180, 225, 270, 315};
    painter.setPen(QPen(QColor(0, 255, 0), 1));  // 方向线颜色
    for (int i = 0; i < 8; ++i) {
        double angle = directions[i] * PI / 180.0;  // 将角度转换为弧度
        int x = center.x() + radius * std::cos(angle);
        int y = center.y() + radius * std::sin(angle);
        painter.drawLine(center, QPoint(x, y));  // 绘制从中心到边缘的线
    }
  • 中心十字线：绘制水平和垂直的十字线，进一步增强雷达图的视觉引导。
  • 方向线：绘制八条方向线（0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°），指示各个方位。
7. 绘制刻度线和标注
    // 绘制刻度线和方向标注
    painter.setPen(QPen(Qt::white, 1));
    for (int i = 0; i < 360; i += 10) {
        // 计算刻度线的起点和终点
        int tickLength = (i % 30 == 0) ? 10 : 5;  // 每30度一个长刻度，其他是短刻度
        double radian = i * PI / 180.0;
        int x1 = center.x() + (radius - tickLength) * std::cos(radian);
        int y1 = center.y() + (radius - tickLength) * std::sin(radian);
        int x2 = center.x() + radius * std::cos(radian);
        int y2 = center.y() + radius * std::sin(radian);

        painter.drawLine(x1, y1, x2, y2);

        // 每30度绘制数字标注
        if (i % 30 == 0) {
            QString angleText = QString::number(i) + "°";
            int textX = center.x() + (radius + 15) * std::cos(radian) - 10;
            int textY = center.y() + (radius + 15) * std::sin(radian) + 5;
            painter.drawText(textX, textY, angleText);
        }
    }
  • 刻度线：每10度绘制一条刻度线，每30度绘制较长的刻度线。通过简单的三角函数计算线条的起止点。
  • 数字标注：在每30度的刻度线上添加数字标注，表示当前角度。
8. 绘制方向标注
    // 绘制八个方向标注
    QFont font = painter.font();
    font.setBold(true);
    painter.setFont(font);
    painter.drawText(center.x() + radius + 5, center.y(), "E");     // East
    painter.drawText(center.x() - radius - 25, center.y(), "W");     // West
    painter.drawText(center.x(), center.y() - radius - 20, "N");     // North
    painter.drawText(center.x(), center.y() + radius + 10, "S");     // South

    painter.drawText(center.x() + radius * 0.707 + 10, center.y() - radius * 0.707 - 10, "NE");  // Northeast
    painter.drawText(center.x() + radius * 0.707 + 10, center.y() + radius * 0.707 + 10, "SE");  // Southeast
    painter.drawText(center.x() - radius * 0.707 - 25, center.y() + radius * 0.707 + 10, "SW");  // Southwest
    painter.drawText(center.x() - radius * 0.707 - 25, center.y() - radius * 0.707 - 10, "NW"); 

 // Northwest
  • 方向文字标注：绘制东、南、西、北及四个对角的方向文字标注。通过调整文本位置以确保其位于相应的方位。
9. 绘制雷达扫描区域
    // 绘制雷达扫描的渐变区域（顺时针扫描，范围为圆的1/6）
    QConicalGradient gradient(center, -angle * 180.0 / PI);  // 使用负角度实现顺时针渐变效果
    gradient.setColorAt(0.0, QColor(0, 255, 0, 180));  // 扫描的前端亮绿色
    gradient.setColorAt(0.1, QColor(0, 255, 0, 2));  // 中间部分逐渐变淡
    gradient.setColorAt(1.0, Qt::transparent);         // 扫描尾部完全透明

    painter.setBrush(gradient);
    painter.setPen(Qt::NoPen);

    // 调整扫描区域的角度范围
    painter.drawPie(center.x() - radius, center.y() - radius, radius * 2, radius * 2,
                    int(-angle * 180.0 / PI * 16), 30 * 16);  // 控制为30度的扫描区域
  • 渐变区域：使用 QConicalGradient 创建一个顺时针的渐变区域，表现雷达扫描效果。
  • 绘制扫描区域：通过 drawPie 方法绘制出当前扫描的区域，以视觉上表现雷达的动态扫描。
10. 绘制动态目标点
    // 动态绘制目标点
    painter.setBrush(QColor(255, 0, 0, 180));  // 目标点使用红色半透明
    painter.setPen(Qt::NoPen);
    for (const QPoint &target : targets) {
        painter.drawEllipse(target, 6, 6);  // 绘制随机生成的红色目标点
    }
  • 目标点设置：以红色半透明的方式绘制动态生成的目标点，使其在雷达图上更加突出。
11. 绘制当前扫描线
    // 绘制当前扫描线
    painter.setPen(QPen(QColor(0, 255, 0), 2));
    painter.drawLine(center, QPoint(center.x() + radius * std::cos(angle), center.y() + radius * std::sin(angle)));
}
  • 扫描线绘制：绘制一条从中心到当前扫描位置的绿色线条，直观地展示当前雷达的扫描方向。
12. 更新扫描角度
void RadarWidget::updateAngle() {
    // 以一定的步伐增加扫描角度，使扫描线顺时针旋转
    angle += 0.05;
    if (angle >= 2 * PI)
        angle = 0;
    update();  // 调用重绘
}
  • 更新扫描角度：在每次定时器触发时，增加扫描角度，使其顺时针旋转。
  • 重绘：调用 update() 方法触发控件重绘，确保绘制的内容保持最新。
13. 生成随机目标点
void RadarWidget::generateRandomTargets() {
    targets.clear();  // 清空现有目标点

    int w = width();
    int h = height();
    int radius = qMin(w, h) / 2 * 0.9;  // 半径也需要保持一致
    QPoint center(w / 2, h / 2);

    // 随机生成目标点（最多maxTargets个）
    for (int i = 0; i < maxTargets; ++i) {
        // 随机生成目标点位置，限制在雷达半径范围内
        int randRadius = std::rand() % (radius - 10);  // 防止目标点超出边界
        double randAngle = (std::rand() % 360) * PI / 180.0;
        int x = center.x() + randRadius * std::cos(randAngle);
        int y = center.y() + randRadius * std::sin(randAngle);  // 顺时针方向
        targets.push_back(QPoint(x, y));
    }

    update();  // 更新界面显示
}
  • 目标点生成：清空现有目标点，并随机生成指定数量（最多 maxTargets）的新目标点，确保其位置在雷达半径范围内。
  • 随机化：使用随机半径和角度来生成目标点，确保每次生成的目标点位置不相同。

总结

这个开源Demo提供了一个简单易用的雷达图控件，涵盖了Qt绘图的基本用法和动态内容更新的实现。用户可以在此基础上进行扩展，例如：

  • 添加用户交互功能，例如点击目标点获取信息。
  • 实现更复杂的目标点生成逻辑，或者根据外部数据动态更新目标位置。
  • 改进UI界面，使其更符合现代应用的设计规范。

通过深入了解和分析这个Demo，你将能够掌握Qt绘图机制和动态控件的设计，适合用于学习和实际项目中。希望这对你有帮助！

上一篇：基于esp8266的nodemcu实现网页配置wifi功能


下一篇：鸿蒙应用示例：Java与ArkTS中的方法重载及数值类型对比