Qt利用QPainter自绘实现热感应图效果

相关资料：

https://blog.csdn.net/gongjianbo1992/article/details/104566768?utm_medium=distribute.pc_relevant_bbs_down.none-task--2~all~first_rank_v2~rank_v29-13.nonecase&depth_1-utm_source=distribute.pc_relevant_bbs_down.none-task--2~all~first_rank_v2~rank_v29-13.nonecase

https://github.com/gongjianbo/MyTestCode/tree/master/Qt/MyHeatMap  代码下载

.pro

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += 
    main.cpp 
    mainwindow.cpp

HEADERS += 
    mainwindow.h

FORMS += 
    mainwindow.ui

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

#include <QPainter>
#include <QPaintEvent>
#include <QMouseEvent>

#include <QLinearGradient>
#include <QRadialGradient>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

//参照JS版：https://blog.csdn.net/HiddlestonCloud/article/details/83743449
//参照Qt版：https://blog.csdn.net/pbe_sedm/article/details/8982357
class MainWindow : public QMainWindow
{
    Q_OBJECT
    struct Point
    {
        int posX;
        int posY;
        int radius;
        int count;
    };
public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

protected:
    void paintEvent(QPaintEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;

    //添加点，返回该点权重，如果是一次性生成的点可以单独优化
    int appendPoint(const Point &pt);
    //最大权重改变之后重新绘制dataimg
    void drawDataImg();
    //叠加绘制dataimg
    void drawDataPoint(const Point &pt);
    //根据dataimg绘制热力图
    void drawHeatImg();

    //清空
    void clear();

private:
    Ui::MainWindow *ui;

    //整体的透明度[0-255]
    static constexpr int HeatAlpha=200;
    //固定宽高的演示
    static constexpr int ImgWidth=1000;
    static constexpr int ImgHeight=700;
    //最大权重
    int _maxCount=1;
    //权重统计表（把权重单独拿出来，就可以不用遍历数据点来计算了）
    //加()初始化为0
    int *_countTable=new int[ImgWidth*ImgHeight]();

    //数据点
    QList<Point> _posList;
    //绘制透明度
    QImage _dataImg;
    //最终热力图
    QImage _heatImg;
    //颜色表，透明度为0
    QRgb _colorList[256];
};
#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <QDebug>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //这是固定宽高的演示
    setFixedSize(ImgWidth,ImgHeight);

    //data用alpha叠加
    _dataImg=QImage(ImgWidth,ImgHeight,QImage::Format_Alpha8);
    _dataImg.fill(Qt::transparent);
    //热力图通过alpha值查表
    _heatImg=QImage(ImgWidth,ImgHeight,QImage::Format_ARGB32);
    _heatImg.fill(Qt::transparent);

    //根据线性渐变色条得到颜色表
    QLinearGradient linear=QLinearGradient(QPoint(0,0),QPoint(255,0));
    linear.setColorAt(0, Qt::blue);
    linear.setColorAt(0.4, Qt::blue);
    linear.setColorAt(0.5, Qt::cyan);
    linear.setColorAt(0.6, Qt::green);
    linear.setColorAt(0.8, Qt::yellow);
    linear.setColorAt(0.95, Qt::red);

    //把渐变色绘制到Img方便取颜色
    QImage img(256,1,QImage::Format_ARGB32);
    QPainter painter(&img);
    painter.fillRect(img.rect(),linear);

    //HeatAlpha为热力图整体透明度
    quint32 alpha=0;
    for(quint32 i=0;i<256;i++){
        //根据热力图透明度来计算颜色表的透明度
        alpha=HeatAlpha/255.0*i;
        //typedef unsigned int QRgb: format #AARRGGBB
        //颜色+透明度
        _colorList[i]=img.pixel(i,0)&0x00FFFFFF|(alpha<<24);
    }

    //清空图像
    connect(ui->btnClear,&QPushButton::clicked,this,[=](){
        this->clear();
    });
    //保存图像
    connect(ui->btnSave,&QPushButton::clicked,this,[=](){
        _dataImg.save("save.png","PNG");
    });
}

MainWindow::~MainWindow()
{
    delete []_countTable;
    delete ui;
}

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter p(this);

    //绘制一个黑色网格，便于查看渐变色
    p.setPen(QPen(Qt::black,2));
    for(int i=0;i<width();i+=50){
        p.drawLine(i,0,i,height());
    }
    for(int i=0;i<height();i+=50){
        p.drawLine(0,i,width(),i);
    }
    //绘制热力图
    p.drawImage(0,0,_heatImg);
    QMainWindow::paintEvent(event);
}

void MainWindow::mousePressEvent(QMouseEvent *event)
{
    event->accept();
    const QPoint pos=event->pos();
    const int radius=ui->spinBox->value();

    //次数默认为1
    const Point pt{pos.x(),pos.y(),radius,1};
    const int pos_count=appendPoint(pt);
    //目前是根据最大次数来计算的，或许也可以根据次数来分段
    //为什么不直接if(pos_count>_maxCount)才重新绘制？
    //而是有两个点叠加if(pos_count>1)就重新绘制？
    //因为单纯的叠加目前还没有带入权重来计算，如果最大权重更大，那么这个叠加的点颜色就走样了
    if(pos_count>1){
        if(pos_count>_maxCount)
            _maxCount=pos_count;
        drawDataImg();
    }else{
        drawDataPoint(pt);
    }
    drawHeatImg();
    update();
}

int MainWindow::appendPoint(const Point &pt)
{
    //无效的数据
    if(pt.posX<0||pt.posY<0||pt.radius<0||
            pt.posX>=ImgWidth||pt.posY>=ImgHeight)
        return 0;
    //根据权重表获知是否已有该点
    if(_countTable[pt.posX+pt.posY*ImgWidth]>0){
        for(Point &the_pos:_posList)
        {
            if(the_pos.posX==pt.posX&&the_pos.posY==pt.posY){
                //对已有点叠加权重值
                the_pos.count+=pt.count;
                break;
            }
        }
    }else{
        _posList.push_back(pt);
    }
    _countTable[pt.posX+pt.posY*ImgWidth]+=pt.count;
    return _countTable[pt.posX+pt.posY*ImgWidth];
}

void MainWindow::drawDataImg()
{
    //重新绘制先清空
    _dataImg.fill(Qt::transparent);
    QPainter painter(&_dataImg);
    painter.setPen(Qt::transparent);
    //绘制点的部分可以调用drawpoint
    const double max_count=_maxCount;
    for(int i=0;i<_posList.count();i++)
    {
        const Point &pt=_posList.at(i);
        //以最大次数来计算该点的权重
        const uchar alpha=uchar(_countTable[pt.posX+pt.posY*ImgWidth]/max_count*255);
        QRadialGradient gradient(pt.posX,pt.posY,pt.radius);
        gradient.setColorAt(0,QColor(0,0,0,alpha));
        gradient.setColorAt(1,QColor(0,0,0,0));
        painter.setBrush(gradient);
        painter.drawEllipse(QPointF(pt.posX,pt.posY),pt.radius,pt.radius);
    }
}

void MainWindow::drawDataPoint(const Point &pt)
{
    QPainter painter(&_dataImg);
    painter.setPen(Qt::transparent);

    //以最大次数来计算该点的权重
    const uchar alpha=uchar(_countTable[pt.posX+pt.posY*ImgWidth]/(double)_maxCount*255);

    QRadialGradient gradient(pt.posX,pt.posY,pt.radius);
    gradient.setColorAt(0,QColor(0,0,0,alpha));
    gradient.setColorAt(1,QColor(0,0,0,0));
    painter.setBrush(gradient);
    painter.drawEllipse(QPointF(pt.posX,pt.posY),pt.radius,pt.radius);
}

void MainWindow::drawHeatImg()
{
    //把alpha值转为颜色值
    for(int row=0;row<_dataImg.height();row++)
    {
        //dataimg QImage::Format_Alpha8，一个点1个字节
        const uchar *line_data=_dataImg.scanLine(row);
        //heatimg QImage::Format_ARGB32，一个点4个字节
        QRgb *line_heat=reinterpret_cast<QRgb*>(_heatImg.scanLine(row));
        for(int col=0;col<_dataImg.width();col++)
        {
            //根据alpha透明度从颜色表取颜色
            line_heat[col]=_colorList[line_data[col]];
        }
    }
}

void MainWindow::clear()
{
    _dataImg.fill(Qt::transparent);
    _heatImg.fill(Qt::transparent);
    _posList.clear();
    _maxCount=1;
    memset(_countTable,0,ImgWidth*ImgHeight*sizeof(int));
    update();
}

mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>667</width>
    <height>452</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout">
    <property name="leftMargin">
     <number>0</number>
    </property>
    <property name="topMargin">
     <number>0</number>
    </property>
    <property name="rightMargin">
     <number>0</number>
    </property>
    <property name="bottomMargin">
     <number>0</number>
    </property>
    <item>
     <layout class="QHBoxLayout" name="horizontalLayout">
      <item>
       <widget class="QLabel" name="label">
        <property name="text">
         <string>Radius</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QSpinBox" name="spinBox">
        <property name="minimum">
         <number>10</number>
        </property>
        <property name="maximum">
         <number>200</number>
        </property>
        <property name="value">
         <number>50</number>
        </property>
       </widget>
      </item>
      <item>
       <spacer name="horizontalSpacer">
        <property name="orientation">
         <enum>Qt::Horizontal</enum>
        </property>
        <property name="sizeHint" stdset="0">
         <size>
          <width>40</width>
          <height>20</height>
         </size>
        </property>
       </spacer>
      </item>
      <item>
       <widget class="QPushButton" name="btnClear">
        <property name="text">
         <string>clear</string>
        </property>
       </widget>
      </item>
      <item>
       <widget class="QPushButton" name="btnSave">
        <property name="text">
         <string>save</string>
        </property>
       </widget>
      </item>
     </layout>
    </item>
    <item>
     <spacer name="verticalSpacer">
      <property name="orientation">
       <enum>Qt::Vertical</enum>
      </property>
      <property name="sizeHint" stdset="0">
       <size>
        <width>20</width>
        <height>373</height>
       </size>
      </property>
     </spacer>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>667</width>
     <height>23</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>