Qt绘制热度图、频谱图、地形图、colormap

原理

什么热度图啊、频谱图啊，诸如此类的，其本质都是数值与颜色在一幅图上的映射，我们称其为 colormap。

这里为简化描述，颜色统一采用RGBA模式，RGB就是红绿蓝，A代表透明度。

于是乎画出一张colormap，即遍历整幅图，为每个像素点设置一个RGBA值，函数可以表示为：

  1. int colorMatrix[width][height];
  2. void drawColorMap(){
  3.     for(int i = 0; i < width; ++i){
  4.         for(int j = 0; j < height; ++j){
  5.             colormap[i][j] = colorMatrix[i][j];
  6.         }
  7.     }
  8. }

最终得到如下这种形式的效果：

实现方法

  • 以Qt为UI框架
  • 采用第三方库QCustomplot, 因为这个库使用起来很方便，只需要导入 .h 和 .cpp 文件就行，无需编译成动态链接库。

首先，我们对QCustomplot所呈现出的图像有个基础的认识，要实现colormap需要用到的地方我在图中标注了下，主要包括。

  • 坐标轴的隐藏（看个人需求）
  • 创建一个QCPColorMap类，用于实现上边所说的 drawColorMap 功能
  • 创建一个图标尺，用来显示颜色的区间

上边的三步对应程序：

  1. // configure axis rect:
  2.     m_customPlot = new QCustomPlot(this);
  3.     m_customPlot->setInteractions(QCP::iRangeDrag|QCP::iRangeZoom); // this will also allow rescaling the color scale by dragging/zooming
  4.     m_customPlot->axisRect()->setupFullAxesBox(true);
  5.     //隐藏坐标，上下左右
  6.     m_customPlot->xAxis->setVisible(true);
  7.     m_customPlot->yAxis->setVisible(true);
  8.     m_customPlot->xAxis2->setVisible(true);
  9.     m_customPlot->yAxis2->setVisible(true);
  10.  
  11.     // set up the QCPColorMap:
  12.     m_colorMap = new QCPColorMap(m_customPlot->xAxis, m_customPlot->yAxis);
  13.     // add a color scale:
  14.     m_colorScale = new QCPColorScale(m_customPlot);
  15.     m_customPlot->plotLayout()->addElement(0, 1, m_colorScale); // add it to the right of the main axis rect
  16.     m_colorScale->setType(QCPAxis::atRight); // scale shall be vertical bar with tick/axis labels right (actually atRight is already the default)
  17.     m_colorMap->setColorScale(m_colorScale); // associate the color map with the color scale
  18.     // set the color gradient of the color map to one of the presets:
  19.     m_colorMap->setGradient(QCPColorGradient::gpJet);

这里引入了一个 QCPColorGradient 的概念，我们不难想到这样一个问题：加入值为0时颜色是蓝色，值为10时颜色是红色，那值为5时颜色是什么？这就是 QCPColorGradient 要做的事了。

难道就这么简单？

假如我们要绘制的图像可以分为 400 * 300 个网格分布，按常理来说只需要遍历这些网格并设置颜色就行了，但是实际情况往往是我们获取到的数据很少，

比如只有64个位置，如何扩充到 400 * 300 这么大的格子里呢，该如何插值呢？

不难想象，离这些点越近的格子受到这个点影响越大，反之越小。

距离，关键词为距离，令距离为r，则r代表着插值方式是线性的，改为r2则是曲线的，效果更佳平滑，r3, r^4 以此类推

为了简化计算，采用距离的平方作为权重，只需累加已知的点在未知点的权重即可：

  1. for(int i = 0; i < datax; ++i){
  2.     for(int j = 0; j < datay; ++j){
  3.         m_colorMap->data()->cellToCoord(i, j, &x, &y);
  4.         //计算权重值
  5.         double sum = 0.0;
  6.         for(int k = 0; k < m_channelAxis.size(); ++k){
  7.             //(x, y) 为 (i, j) 在 colormap坐标系下的映射
  8.             auto& point = m_channelAxis[k];
  9.             double rr = (point.x() - x) * (point.x() - x) + (point.y() - y) * (point.y() - y);
  10.             sum += 1 / rr;
  11.             m_channelWeight[i][j][k] = 1 / rr;
  12.         }
  13.         for(int k = 0; k < m_channelAxis.size(); ++k){
  14.             m_channelWeight[i][j][k] /= sum;
  15.         }
  16.     }
  17. }

这样我们就把所有网格对应的颜色值计算出来了，时间复杂度 O(width * height * points)。

等等，这个复杂度貌似很大？400 * 300 * 64 = 7,680,000。700万这个量级是很大的啦，放leetcode跑肯定超时。

因此我们需要需要优化时间复杂度。

时间复杂度优化

如果搞过图像处理估计你已经知道要怎么优化了，上面的问题等价为 ： 已知一幅小尺寸图，如何放大成大尺寸图。

没错，小尺寸。我们上面的网格400 * 300太大了，如果是算 40 * 30 呢？瞬间计算次数就小了有没有！算完之后我们再给他放大嘛。

这里采用双线性插值的方法：

  1. for (int i = 0; i < datax - 1; i++)
  2.     {
  3.         for (int j = 0; j < datay - 1; j++)
  4.         {
  5.             double V1 = m_matrix1[i][j];
  6.             double V2 = m_matrix1[i + 1][j];
  7.             double V3 = m_matrix1[i + 1][j + 1];
  8.             double V4 = m_matrix1[i][j + 1];
  9.             for (int m = 0; m < ratex; m++)
  10.             {
  11.                 for (int n = 0; n < ratey; n++)
  12.                 {
  13.                     int x = i * ratex + m, y = j * ratey + n;
  14.                     if(m_inCircle[x][y] == false) continue;
  15.                     m_matrix[x][y] = doubleLinear(m, n, ratex, ratey, V1, V2, V3, V4);
  16.                     m_colorMap->data()->setCell(x, y, m_matrix[x][y]);
  17.                 }
  18.             }
  19.         }
  20.     }
  21. double HotPlot::doubleLinear(int m, int n, int X, int Y, double V1, double V2, double V3, double V4)
  22. {
  23.     return (m * n * (V3 - V4 - V2 + V1) + X * n * (V4 - V1) + m * Y * (V2 - V1)) / (X * Y) + V1;
  24. }

再来看看现在的计算量 ：40 * 30 * 64 + 400 * 300 = 196800，由700万降到了20万！当然，算的少了多多少少会对图像质量有影响，我们适当在复杂度和图像效果上做一些均衡吧。

原文链接

Qt绘制热度图、频谱图、地形图、colormap-QT开发中文网Qt绘制热度图、频谱图、地形图、colormaphttps://qt.0voice.com/?id=854

Qt开发交流群
QQ群名片

原理

什么热度图啊、频谱图啊，诸如此类的，其本质都是数值与颜色在一幅图上的映射，我们称其为 colormap。

这里为简化描述，颜色统一采用RGBA模式，RGB就是红绿蓝，A代表透明度。

于是乎画出一张colormap，即遍历整幅图，为每个像素点设置一个RGBA值，函数可以表示为：

  1. int colorMatrix[width][height];
  2. void drawColorMap(){
  3.     for(int i = 0; i < width; ++i){
  4.         for(int j = 0; j < height; ++j){
  5.             colormap[i][j] = colorMatrix[i][j];
  6.         }
  7.     }
  8. }

最终得到如下这种形式的效果：

实现方法

  • 以Qt为UI框架
  • 采用第三方库QCustomplot, 因为这个库使用起来很方便，只需要导入 .h 和 .cpp 文件就行，无需编译成动态链接库。

首先，我们对QCustomplot所呈现出的图像有个基础的认识，要实现colormap需要用到的地方我在图中标注了下，主要包括。

  • 坐标轴的隐藏（看个人需求）
  • 创建一个QCPColorMap类，用于实现上边所说的 drawColorMap 功能
  • 创建一个图标尺，用来显示颜色的区间

上边的三步对应程序：

  1. // configure axis rect:
  2.     m_customPlot = new QCustomPlot(this);
  3.     m_customPlot->setInteractions(QCP::iRangeDrag|QCP::iRangeZoom); // this will also allow rescaling the color scale by dragging/zooming
  4.     m_customPlot->axisRect()->setupFullAxesBox(true);
  5.     //隐藏坐标，上下左右
  6.     m_customPlot->xAxis->setVisible(true);
  7.     m_customPlot->yAxis->setVisible(true);
  8.     m_customPlot->xAxis2->setVisible(true);
  9.     m_customPlot->yAxis2->setVisible(true);
  10.  
  11.     // set up the QCPColorMap:
  12.     m_colorMap = new QCPColorMap(m_customPlot->xAxis, m_customPlot->yAxis);
  13.     // add a color scale:
  14.     m_colorScale = new QCPColorScale(m_customPlot);
  15.     m_customPlot->plotLayout()->addElement(0, 1, m_colorScale); // add it to the right of the main axis rect
  16.     m_colorScale->setType(QCPAxis::atRight); // scale shall be vertical bar with tick/axis labels right (actually atRight is already the default)
  17.     m_colorMap->setColorScale(m_colorScale); // associate the color map with the color scale
  18.     // set the color gradient of the color map to one of the presets:
  19.     m_colorMap->setGradient(QCPColorGradient::gpJet);

这里引入了一个 QCPColorGradient 的概念，我们不难想到这样一个问题：加入值为0时颜色是蓝色，值为10时颜色是红色，那值为5时颜色是什么？这就是 QCPColorGradient 要做的事了。

难道就这么简单？

假如我们要绘制的图像可以分为 400 * 300 个网格分布，按常理来说只需要遍历这些网格并设置颜色就行了，但是实际情况往往是我们获取到的数据很少，

比如只有64个位置，如何扩充到 400 * 300 这么大的格子里呢，该如何插值呢？

不难想象，离这些点越近的格子受到这个点影响越大，反之越小。

距离，关键词为距离，令距离为r，则r代表着插值方式是线性的，改为r2则是曲线的，效果更佳平滑，r3, r^4 以此类推

为了简化计算，采用距离的平方作为权重，只需累加已知的点在未知点的权重即可：

  1. for(int i = 0; i < datax; ++i){
  2.     for(int j = 0; j < datay; ++j){
  3.         m_colorMap->data()->cellToCoord(i, j, &x, &y);
  4.         //计算权重值
  5.         double sum = 0.0;
  6.         for(int k = 0; k < m_channelAxis.size(); ++k){
  7.             //(x, y) 为 (i, j) 在 colormap坐标系下的映射
  8.             auto& point = m_channelAxis[k];
  9.             double rr = (point.x() - x) * (point.x() - x) + (point.y() - y) * (point.y() - y);
  10.             sum += 1 / rr;
  11.             m_channelWeight[i][j][k] = 1 / rr;
  12.         }
  13.         for(int k = 0; k < m_channelAxis.size(); ++k){
  14.             m_channelWeight[i][j][k] /= sum;
  15.         }
  16.     }
  17. }

这样我们就把所有网格对应的颜色值计算出来了，时间复杂度 O(width * height * points)。

等等，这个复杂度貌似很大？400 * 300 * 64 = 7,680,000。700万这个量级是很大的啦，放leetcode跑肯定超时。

因此我们需要需要优化时间复杂度。

时间复杂度优化

如果搞过图像处理估计你已经知道要怎么优化了，上面的问题等价为 ： 已知一幅小尺寸图，如何放大成大尺寸图。

没错，小尺寸。我们上面的网格400 * 300太大了，如果是算 40 * 30 呢？瞬间计算次数就小了有没有！算完之后我们再给他放大嘛。

这里采用双线性插值的方法：

  1. for (int i = 0; i < datax - 1; i++)
  2.     {
  3.         for (int j = 0; j < datay - 1; j++)
  4.         {
  5.             double V1 = m_matrix1[i][j];
  6.             double V2 = m_matrix1[i + 1][j];
  7.             double V3 = m_matrix1[i + 1][j + 1];
  8.             double V4 = m_matrix1[i][j + 1];
  9.             for (int m = 0; m < ratex; m++)
  10.             {
  11.                 for (int n = 0; n < ratey; n++)
  12.                 {
  13.                     int x = i * ratex + m, y = j * ratey + n;
  14.                     if(m_inCircle[x][y] == false) continue;
  15.                     m_matrix[x][y] = doubleLinear(m, n, ratex, ratey, V1, V2, V3, V4);
  16.                     m_colorMap->data()->setCell(x, y, m_matrix[x][y]);
  17.                 }
  18.             }
  19.         }
  20.     }
  21. double HotPlot::doubleLinear(int m, int n, int X, int Y, double V1, double V2, double V3, double V4)
  22. {
  23.     return (m * n * (V3 - V4 - V2 + V1) + X * n * (V4 - V1) + m * Y * (V2 - V1)) / (X * Y) + V1;
  24. }

再来看看现在的计算量 ：40 * 30 * 64 + 400 * 300 = 196800，由700万降到了20万！当然，算的少了多多少少会对图像质量有影响，我们适当在复杂度和图像效果上做一些均衡吧。

原文链接

Qt绘制热度图、频谱图、地形图、colormap-QT开发中文网Qt绘制热度图、频谱图、地形图、colormaphttps://qt.0voice.com/?id=854

Qt开发交流群
QQ群名片
注：本文转载自blog.csdn.net的Qt开发老杰的文章"https://blog.csdn.net/QtCompany/article/details/129956457"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！