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

news/2024/12/22 0:37:52/

使用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");     // Eastpainter.drawText(center.x() - radius - 25, center.y(), "W");     // Westpainter.drawText(center.x(), center.y() - radius - 20, "N");     // Northpainter.drawText(center.x(), center.y() + radius + 10, "S");     // Southpainter.drawText(center.x() + radius * 0.707 + 10, center.y() - radius * 0.707 - 10, "NE");  // Northeastpainter.drawText(center.x() + radius * 0.707 + 10, center.y() + radius * 0.707 + 10, "SE");  // Southeastpainter.drawText(center.x() - radius * 0.707 - 25, center.y() + radius * 0.707 + 10, "SW");  // Southwestpainter.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绘图机制和动态控件的设计，适合用于学习和实际项目中。希望这对你有帮助！


http://www.ppmy.cn/news/1534348.html

相关文章

用Python实现运筹学——Day 11: 线性规划的实际应用

用Python实现运筹学——Day 11: 线性规划的实际应用

一、学习内容 1. 不同领域中线性规划的经典应用场景 线性规划在多个领域中有广泛的应用&#xff0c;常见的应用领域包括&#xff1a; 生产计划与资源分配&#xff1a;用于优化生产调度、资源分配和生产线管理&#xff0c;最大化利润或最小化成本。物流与运输&#xff1a;解决…
阅读更多...
IPv6常见问题解答

IPv6常见问题解答

1. 怎么判断宽带是否支持IPv6&#xff1f; 有两种方式。①与宽带运营商确认线路是否支持IPv6&#xff1b;②电脑直连猫拨号&#xff0c;看电脑是否获取到IPv6地址。 2. 怎么判断IPv6线路是否支持前缀授权&#xff1f; 请致电宽带运营商确认。 3. 怎么判断路由器是否支持IPv…
阅读更多...
【JavaEE】——线程池大总结

【JavaEE】——线程池大总结

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c; 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;希望本文内容能够帮助到你&#xff01; 目录 引入&#xff1a;问题引入 一&#xff1a;解决方案 1&#xff1a;方案一——协程/纤程 &#xff08;1…
阅读更多...
Llama 3.2 多模态大模型快速指南

Llama 3.2 多模态大模型快速指南

Meta 刚刚发布了 Llama 3.2&#xff0c;将语言和视觉模型整合到一个强大的多模态系统中。它引入了四个模型&#xff1a;两个轻量级文本模型&#xff08;1B 和 3B&#xff09;和两个视觉模型&#xff08;11B 和 90B&#xff09;。这些模型专为一系列任务而设计&#xff0c;从总结…
阅读更多...
828华为云征文 | 利用FIO工具测试Flexus云服务器X实例存储性能

828华为云征文 | 利用FIO工具测试Flexus云服务器X实例存储性能

目录 一、Flexus云服务器X实例概要 1.1 Flexus云服务器X实例摘要 1.2 产品特点 1.3 存储方面性能 1.4 测评服务器规格 二、FIO工具 2.1 安装部署FIO 2.2 主要性能指标概要 三、进行压测 3.1 测试全盘随机读IO延迟 3.2 测试全盘随机写IO延迟 3.3 测试随机读IOPS 3.4…
阅读更多...
掌控物体运动艺术：图扑 Easing 函数实践应用

掌控物体运动艺术：图扑 Easing 函数实践应用

现如今&#xff0c;前端开发除了构建功能性的网站和应用程序外&#xff0c;还需要创建具有吸引力且尤为流畅交互的用户界面&#xff0c;其中动画技术在其中发挥着至关重要的作用。在数字孪生领域&#xff0c;动画的应用显得尤为重要。数字孪生技术通过精确模拟现实世界中的对象…
阅读更多...
iOS--RunLoop原理

iOS--RunLoop原理

前言 曾经在写项目的时候遇到过这么一个问题。&#xff1a; 项目中添加了一个tableview&#xff0c;然后还有一个计时器&#xff0c;当滑动tableview的时候会阻塞计时器&#xff0c;你得执行这么一段代码后&#xff0c;计时器才能正常运行。 RunLoop.current.add(timer, for…
阅读更多...
游戏中的对象池技术探索（一）

游戏中的对象池技术探索（一）

前言 对象池技术在游戏开发中的应用非常普遍&#xff0c;它是一种高效管理对象实例的技术&#xff0c;能够避免频繁和重复创建对象所带来的性能开销。本篇文章我们就来探索一下如何在游戏开发中设计通用对象池&#xff0c;使之易于使用和扩展。 代码 代码目录结构 ObjectPool …
阅读更多...
最新文章

Copyright @ 2022~2023