当前位置：首页 > news >正文

Qt/C++实现的热力图功能

news 2026/6/2 18:23:44

Qt/C++实现的热力图功能，通过选择一张图片背景图后（PNG,JPG常用图片格式），左上角还支持输入半径，可以设置绘制的半径，半径越大热力图半径越大，通过鼠标点击界面出现热力图的效果，点击次数越多热力效果值越高，热力值由蓝橙红几种颜色，点击次数越多颜色越红，支持增加网格线，支持清除界面的热力图以及图片。详情见操作视频。新增热力图颜色设置，有6个轮廓圈颜色设置，最外层为c1，最内部为c6，每个轮廓圈颜色比例设置（见下图）。源码：使用Qt5.6.1_MinGW，Qt5.13.1_MinGW编译通过，其他版本请自行尝试。 c.61

最近在捣鼓一个Qt/C++的热力图功能，感觉还挺有意思的。今天就来分享一下实现过程和一些代码细节。首先，这个功能的核心是通过鼠标点击在图片上生成热力图，点击次数越多，热力值越高，颜色也会从蓝色逐渐变为红色。听起来是不是有点酷？

背景图的选择

首先，我们需要选择一张背景图。支持PNG和JPG格式，这个比较简单，直接用Qt的QFileDialog就能搞定。

QString fileName = QFileDialog::getOpenFileName(this, tr("Open Image"), "", tr("Image Files (*.png *.jpg *.bmp)")); if (!fileName.isEmpty()) { QPixmap pixmap(fileName); ui->label->setPixmap(pixmap); }

这段代码就是打开一个文件选择对话框，用户选择图片后，将其加载到QLabel中显示。

热力图的绘制

接下来是热力图的绘制部分。我们通过鼠标点击来生成热力图，点击次数越多，热力值越高。这里我们用一个二维数组来存储每个像素点的热力值。

void MainWindow::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { QPoint pos = event->pos(); int x = pos.x(); int y = pos.y(); // 更新热力值 heatMap[x][y] += 1; update(); } }

每次鼠标点击时，我们更新对应位置的热力值，并调用update()函数触发重绘。

颜色的渐变

热力图的颜色渐变是通过热力值来决定的。我们可以用一个简单的线性插值来实现颜色从蓝色到红色的渐变。

QColor getHeatColor(int value) { int maxValue = 100; // 假设最大热力值为100 int r = 255 * value / maxValue; int g = 0; int b = 255 - (255 * value / maxValue); return QColor(r, g, b); }

这个函数根据热力值返回一个颜色，热力值越高，红色成分越多，蓝色成分越少。

网格线的绘制

有时候，我们可能需要显示网格线来更好地观察热力图。这个功能也很简单，直接用QPainter画线就行了。

void MainWindow::paintEvent(QPaintEvent *event) { QPainter painter(this); // 绘制热力图 for (int i = 0; i < width(); ++i) { for (int j = 0; j < height(); ++j) { if (heatMap[i][j] > 0) { QColor color = getHeatColor(heatMap[i][j]); painter.setPen(color); painter.drawPoint(i, j); } } } // 绘制网格线 painter.setPen(Qt::gray); for (int i = 0; i < width(); i += 10) { painter.drawLine(i, 0, i, height()); } for (int j = 0; j < height(); j += 10) { painter.drawLine(0, j, width(), j); } }

清除功能

最后，我们还需要一个清除功能，可以一键清除所有的热力图和背景图。

void MainWindow::on_clearButton_clicked() { // 清除热力图 memset(heatMap, 0, sizeof(heatMap)); // 清除背景图 ui->label->clear(); update(); }

新增的颜色设置

最近还新增了一个功能，可以设置热力图的轮廓圈颜色。总共有6个轮廓圈，每个轮廓圈的颜色可以自定义。

void MainWindow::setContourColors(QColor c1, QColor c2, QColor c3, QColor c4, QColor c5, QColor c6) { contourColors[0] = c1; contourColors[1] = c2; contourColors[2] = c3; contourColors[3] = c4; contourColors[5] = c5; contourColors[6] = c6; }

这个功能可以让热力图更加个性化，用户可以根据自己的喜好来设置颜色。