自定义图谱控件

转载 2013年12月03日 10:01:47

转自http://blog.csdn.net/xianglitian/article/details/6100767

先上一张效果图吧

      这个是我曾经上传过的一个资源——自定义图谱控件使用范例。记得那个时候应该是毕业设计如火如荼日渐焦灼的时期,论坛里很多朋友询问有没有什么好的绘制图谱的控件。当然多数网友推荐mschart等成熟控件,不过我一直建议对于简单的图谱可以自行绘制。因为我现在的工作就是做上位机开发,在我的项目中也需要显示采集上来的数据,刚到公司时就一直在做这个图谱控件,后来经过一段时间的使用自问还是比较稳定的,而且可以很好的实现基本功能。项目中在这个控件基础上还做了相当于matlab中image功能一个可以表达三维信息的图谱绘制控件,实际应用使用效果也不错。

      这个控件上传后再在论坛遇到类似的问题我都会推荐这个例子给大家试用,得到的反馈也还算可以。这些天想写些技术博客,一方面系统的数理一下知识,另一方面也是可以和朋友们交流以便共同提高。不过想要动笔的时候发现自己掌握的那些小伎俩都拿不太上台面,于是想起这个例子,以它为基础写点东西应该还看得过去吧,呵呵。

       这是一个自定义控件,在自定义控件实现信号灯一文中我提过现在做东西我喜欢通过自定义控件实现,尤其是这种和MFC标准控件向去深远的控件。所以很自然的,这个控件也是从CWnd派生的一个自定义控件。关于自定义控件的一些基础的东西可以参见自定义控件实现信号灯中的相关介绍。这里主要介绍一下这个图谱控件的核心功能及其实现方法。我将这个控件的类命名为CGraphView,其声明的代码如下

  1. void CGraphView::DrawGraphy(CDC *pDC, CRect rectCoord)  
  2. {  
  3.     CRect   rectView;  
  4.     CRgn    rgnTemp, rgnView;  
  5.     CPen    penLine, *pOldPen;  
  6.     INT_PTR nCount  = m_dataGraph.GetCount();  
  7.   
  8.     if(nCount==0)  
  9.         return;  
  10.   
  11.     double  dbData;  
  12.     int     nOffsetX, nOffsetY;  
  13.     int     nRangX  = abs(int((m_dbEndX-m_dbStartX)*m_dbResolutionX)),  
  14.             nRangY  = abs(int((m_dbEndY-m_dbStartY)*m_dbResolutionY));  
  15.     int     nCoordWith      = rectCoord.Width(),  
  16.             nCoordHeight    = rectCoord.Height(),  
  17.             nOriginX        = rectCoord.left-int(m_dbStartX*nCoordWith/nRangX),  
  18.             nOriginY        = rectCoord.bottom+int(m_dbStartY*nCoordHeight/nRangY);  
  19.   
  20.   
  21.     rgnTemp.CreateRectRgnIndirect(rectCoord);  
  22.     pDC->SelectObject(rgnTemp);  
  23.     penLine.CreatePen(PS_SOLID, 1, m_clrWave);  
  24.     pOldPen     = pDC->SelectObject(&penLine);  
  25.   
  26.     dbData      = m_dataGraph.ElementAt(0);  
  27.     nOffsetY    = int(nCoordHeight*dbData/nRangY);  
  28.     pDC->MoveTo(nOriginX, nOriginY-nOffsetY);  
  29.   
  30.     for(int i=1; i<nCount; i++)  
  31.     {  
  32.         dbData      = m_dataGraph.ElementAt(i);  
  33.         nOffsetX    = int(nCoordWith*(i+1)/nRangX);  
  34.         nOffsetY    = int(nCoordHeight*dbData/nRangY);  
  35.   
  36.         pDC->LineTo(nOriginX+nOffsetX, nOriginY-nOffsetY);  
  37.     }  
  38.     pDC->SelectObject(pOldPen);  
  39.     GetClientRect(rectView);  
  40.     rgnView.CreateRectRgnIndirect(rectView);  
  41.     pDC->SelectObject(rgnView);  
  42. }  

  

      阅读代码不难发现其实这个控件绘制图谱的基本思路就是描点绘图,通过MoveTo、LineTo函数把数据样本点串联起来。在控件中我通过CArray数组m_dataGraph存储绘制数据,而通过LoadGraphyData实现对数据的更新。

      需要说明的是仿真绘图需要将数据映射到绘制坐标系中,否则绘制的图谱不具有分析意义。因此如何构建坐标系,如何计算映射关系就显得比较关键。这里我以x轴为例说一下我这个控件中这部分的实现,y轴原理与其相同。成员变量m_dbStartX, m_dbEndX标记了图谱x轴的起始坐标和终止坐标,m_nDivisionX变量则记录了显示图谱时的坐标轴分段。效果图所示的就是m_dbStartX=0、m_dbEndX=100、m_nDivisionX=10时x轴的效果,相信对比图示大家应该可以明白这几个参数的含义。m_dbResolutionX记录的是每一个单位刻度的分辨率,参考效果图,坐标轴长度是100,如果我们的绘图精度是1那么每个刻度内就应该绘制1个点,m_dbResolutionX就为1;如果我们的绘图精度是0.1,那么每个刻度内就应该绘制10个点,m_dbResolutionX就为10。也就是说,一屏幕内绘制点的个数最多为(m_dbEndX-m_dbStartX)*m_dbResolutionX个,图中是分辨率为1的效果。明确这些参数的含义就可以确定坐标系了,SetGraphyView和SetResolution两个函数的主要功能就是设置相关参数。

      说到坐标映射,继续以x轴为例DrawGraphy函数中nRangX = abs(int((m_dbEndX-m_dbStartX)*m_dbResolutionX))一句计算出了x轴包含的数据点的总数,而参数rectCoord是坐标系即图中白色区域所占的rect,也就是说nCoordWith  = rectCoord.Width()一句得到的是x轴长度的像素值。这样nCoordWith/nRangX就是每一个数据点之间间隔的像素值,而一旦确定坐标系坐标原点的绘制位置我们就可以通过数据点的x坐标计算出其在控件的客户区坐标系中的横向位置的像素值了。nOriginX = rectCoord.left-int(m_dbStartX*nCoordWith/nRangX)一句就是计算原点在控件客户区内的横向位置,而

nOffsetX = int(nCoordWith*(i+1)/nRangX);则是根据上诉原理计算数据点在横向上与坐标原点的偏移。有一点需要注意的是,屏幕坐标系和客户区坐标系纵向是向下为正,而我们绘制的坐标系y轴是向上的,因此在做计算时要注意相关符号。结合代码应该能够更好的理解坐标映射的关系,以下给出绘制坐标系的代码供大家参考

  1. void CGraphView::DrawCoordinate(CDC* pDC, CRect rectCoord)  
  2. {  
  3.     CString strCoord;  
  4.     CRect   rectTemp;  
  5.     int     i, nSection, nOffset;  
  6.     CSize   szText, szUnit;  
  7.     double  dbTemp, dbTempStartY, dbTempStartX,  
  8.             dbRangX = m_dbEndX-m_dbStartX,  
  9.             dbRangY = m_dbEndY-m_dbStartY;  
  10.   
  11.     dbTempStartX    = m_dbStartX;  
  12.     dbTempStartY    = m_dbStartY;  
  13.   
  14.     pDC->FillSolidRect(rectCoord, m_clrCoordBkg);  
  15.     nOffset = 2;  
  16.     for(i=0; i<=m_nDivisionX; i++)  
  17.     {  
  18.         dbTemp  = dbTempStartX+dbRangX*i/m_nDivisionX;  
  19.         strCoord.Format(_T("%g"), dbTemp);  
  20.   
  21.         nSection    = rectCoord.Width()*i/m_nDivisionX;  
  22.         szText      = pDC->GetTextExtent(strCoord, strCoord.GetLength());  
  23.   
  24.         rectTemp.SetRect(rectCoord.left+nSection-szText.cx/2, rectCoord.bottom+nOffset, rectCoord.left+nSection+szText.cx/2, rectCoord.bottom+szText.cy+nOffset);  
  25.         pDC->MoveTo(rectCoord.left+nSection, rectCoord.top);  
  26.         pDC->LineTo(rectCoord.left+nSection, rectCoord.bottom);  
  27.         pDC->DrawText(strCoord, strCoord.GetLength(), rectTemp, DT_CENTER);  
  28.     }  
  29.   
  30.     nOffset = 2;  
  31.     for(i=0; i<=m_nDivisionY; i++)  
  32.     {  
  33.         dbTemp  = dbTempStartY+dbRangY*i/m_nDivisionY;  
  34.         strCoord.Format(_T("%g"), dbTemp);  
  35.   
  36.         nSection    = rectCoord.Height()*i/m_nDivisionY;  
  37.         szText      = pDC->GetTextExtent(strCoord, strCoord.GetLength());  
  38.   
  39.         rectTemp.SetRect(rectCoord.left-szText.cx-nOffset, rectCoord.bottom-nSection-szText.cy*2/3, rectCoord.left-nOffset, rectCoord.bottom-nSection+szText.cy/3);  
  40.         pDC->MoveTo(rectCoord.left, rectCoord.top+nSection);  
  41.         pDC->LineTo(rectCoord.right+1, rectCoord.top+nSection);  
  42.         pDC->DrawText(strCoord, strCoord.GetLength(), rectTemp, DT_RIGHT);  
  43.     }  
  44.   
  45.     nOffset = 4;  
  46.     rectTemp.SetRect(rectCoord.left+nOffset, rectCoord.top+1, rectCoord.right, rectCoord.bottom-nOffset);  
  47.     pDC->FillSolidRect(rectTemp, m_clrCoordBkg);  
  48. }  

      应该说这个控件的实现并不复杂,其基本原理也比较简单。当然在这个基础之上我们还可以丰富其功能,在实际项目应用中我也确实做了很多包括网格显示、极值寻找、自动幅值等功能。欢迎大家使用这个控件,如果发现什么问题或增添了什么功能也希望大家能分享出来,让我们共同提高。

相关文章推荐

Android 刮刮卡效果 自定义控件实现

  • 2017年11月17日 10:57
  • 4.67MB
  • 下载

Flex实现常用图谱控件

Flex自带的LineChart、ColumnChart等虽然好用,但局限性太大,有时候难以适应我们复杂多变的业务需要...

Qt下自定义控件的制作与使用

  • 2017年11月03日 13:44
  • 1.12MB
  • 下载

自定义控件

  • 2017年09月25日 10:00
  • 10KB
  • 下载

IReader打开书本,关闭书本动画的自定义控件

一,实现思路 实现的效果: 此控件主要是模仿IReader打开书本翻转以及放大特效,在看文章之前可以找本书来翻转加深理解,呵呵,开个玩笑,进入正题。 打开书本: 上层为cover,下层为conten...

FLTK自定义拖拽控件实现窗口分割

  • 2017年09月21日 20:44
  • 8.42MB
  • 下载

自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶(二)

前言:人生总有不平时,无论何时,不后悔就好。通过上两篇的讲解,我们对ValueAnimator的动画的整个过程应该都已经有较深入的理解,不过还有两个概念我们还没有讲解关键帧和ofObject(),关键...

自定义控件实现ViewPager指示器

  • 2016年03月20日 20:25
  • 4.7MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义图谱控件
举报原因:
原因补充:

(最多只允许输入30个字)