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;
}

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

总结

总的来说，这个热力图功能的实现并不复杂，主要是通过鼠标点击来更新热力值，然后根据热力值来绘制颜色。新增的轮廓圈颜色设置也让这个功能更加灵活。如果你对这个功能感兴趣，可以下载源码自己试试看。

源码已经用Qt5.6.1MinGW和Qt5.13.1MinGW编译通过，其他版本可能需要稍作调整。好了，今天的分享就到这里，希望对你有帮助！