基于C#的波形显示控件的实现.docx
《基于C#的波形显示控件的实现.docx》由会员分享，可在线阅读，更多相关《基于C#的波形显示控件的实现.docx（46页珍藏版）》请在冰豆网上搜索。
基于C#的波形显示控件的实现
窗体顶端
目 录
1绪论
1.1课题背景
1.2波形显示控件实现的功能
2主要开发技术介绍
2.1.NET用户控件介绍
2.2GDI+技术介绍
3波形显示控件整体设计
3.1数据存储结构的设计
3.2控件界面模块的设计
3.3控件工作流程的设计
4波形显示控件各细节的实现
4.1坐标值和标尺的实现
4.1.1坐标相关的成员变量
4.1.2坐标标定权值的概念
4.1.3坐标标尺的绘制
4.1.4子标尺线的选择性显示
4.2数据点的描绘
4.2.1数据值转换为坐标值
4.2.2溢出坐标范围的数据点的处理
4.2.3遍历所有数据线并绘制出
4.3波形显示区域网格的实现
4.3.1网格相关的成员变量
4.3.2网格的绘制
4.4工具栏按钮的实现
4.4.1工具栏按钮相互关系
4.4.2工具栏提示标签的实现
4.5波形放大功能的实现
4.5.1局部放大选择框的实现
4.5.2放大选择框的鼠标操作
4.5.3放大选择框的按钮操作
4.5.4更新数据显示范围为放大的范围
4.6坐标自动调整及恢复默认坐标的实现
4.6.1坐标自动调整功能
4.6.2恢复默认坐标范围功能
4.7波形显示控件接口的实现
4.7.1控件基本属性
4.7.2控件外观样式
4.7.3控件绘图接口
4.8波形显示控件其他细节的处理
4.8.1坐标值产生遮盖时的处理
4.8.2波形显示控件大小改变时的处理
4.8.3按钮点击时进行禁用操作
4.8.4右键菜单的显示
4.8.5XML注释以及智能提示
5波形显示控件功能的演示和使用
5.1波形显示控件演示程序的设计
5.2波形显示控件功能的演示
5.2.1外观样式的更改
5.2.2波形显示演示
5.2.3波形显示控件在实际项目中的使用
6课题总结
参考文献
1 绪论
1.1 课题背景
波形显示控件广泛见于监控测量，图像数据显示等自动化相关软件中，更是组态软件必不可少的一部分。
例如美国国家仪器有限公司（NationalInstruments）的NIMeasurementStudio集成式套件以及LabView图形化程序开发环境等，都包含技术成熟的波形显示控件，功能丰富且强大。
目前购买成熟的自动控制相关的第三方控件库往往需要支付较高的费用，且大多数项目只用到些许专业性控件，例如一个喷管实验平台软件，图形用户界面只需要波形显示控件、U型差计控件和压力表控件，因此不适合科研机构以及中小型软件开发公司。
所以掌握简单的控件开发技术，并开发属于自己团队或公司的控件库，从而降低软件开发成本，显得十分必要。
微软的.NET解决方案依据其对已有代码的互操作性、简化部署、分布式、高效开发等诸多优点，完全胜任自动化系统软件的开发。
C#是微软为.NET平台开发的一门语言，通过.NET平台可以轻松使用GDI+技术开发可重用的用户图形界面控件。
GDI+是目前在Windows窗体应用程序中以编程方式呈现图形的唯一方法，它使程序设计者可以创建图形、绘制文本以及将图形图像作为对象操作，旨在提供较好的性能并且易于使用。
波形显示控件因为涉及到坐标系、数据显示方式、精确度、实时性等因素，存在一定的开发难度。
本课题意在使用微软.NET平台下的C#语言，提供一种坐标计算方法，解决自动调整最佳坐标范围，以符合用户视觉的方式显示坐标标尺，并通过GDI+技术显示波形数据，具有一定的实际开发参考价值。
开发完成后的波形显示控件，可以快速嵌入到.NET平台下的软件工程中，开发者只需简单的操作，就可以使用该控件友好地显示波形数据，从而达到快速开发的目的。
回到目录
1.2 波形显示控件实现的功能
本课题所设计的波形显示控件，主要实现以下功能：
（1） 多条波形数据的显示。
该波形显示控件能够同时显示多条波形数据，用户能够控制每条波形数据的显示颜色、线宽、线帽、以及线转折的样式。
并且提供了三种波形数据显示的方式：
连续数据线、离散点、条形图。
（2） 友好坐标标尺的显示。
该波形显示控件能够根据当前显示数据的坐标范围，友好地显示坐标标尺。
例如X轴坐标起始值为34.2，结束坐标值为100.7，则控件不是简单得将坐标10等分并显示并不友好的坐标值，而是通过计算当前波形显示控件的大小，显示40、50……这样的友好的坐标值，并判断是否需要继续在40到50的坐标值之间显示更小分度的坐标值。
（3） 波形显示区域网格的显示。
该波形显示控件可以显示同坐标标尺的坐标线相对应的网格，使得用户能够更直观地观察波形数据。
（4） 波形的局部放大。
该波形显示控件提供了波形局部放大的功能。
并根据实际使用和测试，控制了波形放大的精度，以免产生数据溢出的问题。
（5） 坐标自动调整。
该波形显示控件能够根据当前要显示的波形数据的值，自动选择最佳的坐标范围，来直观地在控件的波形显示区域显示完整的波形曲线。
（6） 外观颜色方案的修改。
该波形显示控件能够修改外观样式，诸如背景色、网格颜色、坐标线颜色、坐标值颜色等都可以进行调整，以使控件外观能够符合软件整体风格。
（7） 其他细节。
该波形显示控件还设计了一个工具栏，可以方面地使用网格显示、局部放大、坐标自动调整、恢复默认坐标功能。
另外还设计右键菜单，能够显示当前鼠标位置的具体坐标值，以及工具栏按钮的快捷按钮。
回到目录
2 主要开发技术介绍
2.1 .NET用户控件介绍
在微软.NET平台下，可以设计出在应用程序内部或应用程序之间提供一致性行为和用户界面的复合控件，即用户控件。
用户控件可以是某个应用程序的本地控件，也可以编译成DLL供多个应用程序使用。
用户控件极大限度的帮助程序员进行代码重用和快速开发。
通常用户控件通过继承UserControl基类，并组合微软提供的基础控件，如Button控件、PictureBox控件、Label控件等，然后进行功能的扩充和组合，从而创建出特定功能的用户控件。
在VisualStudio2005下使用C#开发.NET用户控件，可以通过新建Windows控件库来实现。
创建成功后软件会自动从UserControl基类继承一个类，并允许通过设计视图添加所需要的已有控件。
图21 设计用户控件界面
设计好大致的界面后，就可以着手设计具体的代码，用户控件通常通过对消息处理函数的编写，来实现特定的功能，并将控件中的各个模块联系起来。
用户控件还需要设计出公开的接口属性和方法给控件的使用者，这样控件的使用者就能够调用公开的属性和方法，来实现对控件的操作和控制。
另外，在编写控件的时候对各个属性和方法编写XML注释，并在生成控件的时候输出XML文档文件，这样控件使用者在使用该控件的时候，能够享受VisualStudio智能提示带来的便利。
编译运行后可以检查基本的控件效果：
图22 用户控件的调试运行
最后可以通过项目属性设置程序集信息。
图23 设置程序集信息
这样，一个用户控件就设计完成了。
用户控件自身不能独立作为程序运行，需要嵌入到特定的软件中。
可以通过选择工具箱，添加新创建的.NETFramework组件，添加到工具箱中。
其用法同微软提供的基础控件一样，可以通过拖拽的方式进行使用。
回到目录
2.2 GDI+技术介绍
GDI+是.NETFramework类库，用于进行图形编程。
它是一种基于GDI的技术，GDI即WindowsGraphicalDeviceInterface，是WindowsAPI（应用程序编程接口）中处理图形的部分。
GDI+是目前在Windows窗口应用程序中以编程方式呈现图形的唯一方法，它使程序设计者可以创建图形、绘制文本以及将图形图像作为对象操作，旨在提供较好的性能并且易于使用。
GDI+技术在Windows应用程序中得到了广泛的应用，使得Windows图形图像编程变得格外得容易。
目前Windows平台下的大量应用软件的图形界面通过GDI+技术实现。
利用GDI+技术可以方便地在屏幕、打印机或者其他输出设备上输出图形、文本等内容，程序员无需关心硬件设备和设备驱动，就可以编写出设备无关的应用程序。
一些新兴的信息化软件通过GDI+技术能实现动态交互的高级效果，比如可视化电子地图。
在使用GDI+绘图之前，需要获得绘图对象Graphics，通常在编写控件的Paint事件时，Graphics对象可通过PaintEventArgs参数获得。
所有的绘制过程都是面向对象的，例如实例化1像素的实线黑色画笔并绘制线条，可用如下的方式创建：
GraphicsGrap=e.Graphics;
Penp=newPen（Color.Black）;
Grap.DrawLine（p,0,0,100,100）;
p.Dispose（）;
若填充一个区域的颜色，则代码样式如下所示：
SolidBrushb=newSolidBrush（Color.Red）;
Grap.FillRectangle（b,0,0,10,10）;
b.Dispose（）;
其直观的操作方式使得程序员能快速绘制椭圆，椭圆弧，矩形，贝塞尔曲线，路径等。
通过GDI+技术创建自定义控件能实现各种功能。
只需要在建立自定义控件后，编写响应Paint事件的代码，通过GDI+技术绘制必须的图形，就可以控制自定义控件的外观。
本课题设计的波形显示控件，大量得运用了GDI+技术进行绘图操作，使得控件能够呈现出出色的界面效果。
回到目录
3 波形显示控件整体设计
3.1 数据存储结构的设计
本课题设计的波形显示控件主要用于显示数据点集合。
数据点集合具有大小不确定性，因此可以使用.NET提供的泛型支持，其主要的优点是性能，因此要显示的数据集合可以使用泛型集合中的List类存储，List类可以动态增大和减少其容量。
同时考虑到波形显示控件需能够同时显示多条曲线，且数据点集合根据X轴的值和Y轴的值分别创建List。
经过上面分析，得出波形显示控件内部需要创建两个List>对象，一个用于存储要显示的数据点集合的X轴值的引用，另一个用于存储要显示的数据点集合的Y轴值的引用。
另外，还需要创建List、List、List、List、List分别来存储每条要显示的数据点集合的颜色、线条宽度、连接点样式、起始线帽、样式。
其中DrawStyle为自定义枚举，用于标识画图样式：
线条、点或者条形图。
具体代码设计如下所示：
publicenumDrawStyle{Line,dot,bar}
privateList>_listX=newList>（）;//X轴数据集
privateList>_listY=newList>（）;//Y轴数据集
privateList_listColor=newList（）;//线条颜色
privateList_listWidth=newList（）;//线条宽度
privateList_listLineJoin=newList（）;//连接点
privateList_listLineCap=newList（）;//起始线帽
privateList_listDrawStyle=newList（）;//样式
由上面可知，波形显示控件实际上本身是不存储实际的数据值的，而相当于存储了要显示的数据的“引用”，即实现的是一个无源控件，这样有利于数据处理层和数据呈现层的分离，使软件更趋向于模块化。
另一方面，为实现多波形显示带来了效率：
只需引用传递波形显示控件要显示的数据，而无需整体地复制所有的显示数据给波形显示控件。
回到目录
3.2 控件界面模块的设计
控件的界面可以通过使用微软提供的基础控件进行布局。
首先使用5个pictureBox控件分别表示底部的X轴坐标区域、左侧的Y轴坐标区域、顶部标题栏区域、右侧工具栏区域、以及中间的波形显示区域。
除中间波形显示区域的pictureBox控件外，其余4个pictureBox控件大小有所限制，这样有助于坐标显示的计算。
具体参数如下表所示：
表格31 控件界面5大模块
区域
控件类型
控件名称
控件大小
底部X轴坐标区域
PictureBox
pictureBoxBottom
高度固定45像素
左侧Y轴坐标区域
PictureBox
pictureBoxLeft
宽度固定50像素
顶部标题栏区域
PictureBox
pictureBoxTop
高度固定30像素
右侧工具栏区域
PictureBox
pictureBoxRight
宽度固定50像素
中间波形显示区域
PictureBox
pictureBoxGraph
不设置固定值
右侧工具栏区域中，需要更多控件来标识工具栏，参数如下表所示：
表格32 工具栏模块
作用
控件类型
控件名称
控件大小
底部背景
Panel
panelControlItem
36,178
内部滑动背景
Panel
panelItemsIN
34,178
网格显示按钮
Button
buttonLinesShowXY
32,32
放大选取框功能按钮
Button
buttonBigModeXY
32,32
坐标自动调整按钮
Button
buttonAutoModeXY
32,32
默认坐标范围按钮
Button
buttonReXY
32,32
工具栏上移按钮
Button
buttonControlItemUP
36,10
工具栏下移按钮
Button
buttonItemsDown
36,10
工具栏提示标签
Panel
labelItemShuoMing
100,32
其中的内部滑动背景Panel、工具栏上移按钮和工具栏下移按钮是为今后功能扩充的时候预留的。
当工具栏的工具按钮过多的时候，可以通过上移按钮和下移按钮进行工具栏中项目的滚动。
本课题实际设计过程中，上移按钮和下移按钮是处于禁用状态。
另外，工具栏提示标签初始为隐藏状态，只有在鼠标经过工具栏按钮的时候，工具栏提示标签则移动到指定位置处并显示相应的提示文字。
在实际使用过程中，还存在一个波形局部放大的功能，可以通过一个半透明的PictureBox控件实现，另外还需要两个按钮：
放大和取消。
参数如下表所示：
表格33 波形局部放大模块
作用
控件类型
控件名称
控件大小
半透明的放大框
PictureBox
pictureBoxBigXY
根据实际操作
两个按钮的容器
Panel
panelBigXY
83,32
放大按钮
Button
buttonBigXYBig
40,32
取消按钮
Button
buttonBigXYQuit
40,32
具体设计结果如下图所示：
图31 控件界面模块的设计
波形显示区域还提供了右键菜单的功能，具体参数如下表：
表格34右键菜单模块
作用
控件类型
控件名称
标识菜单
ContextMenuStrip
MenuRightClick
当前位置X坐标值
ToolStripTextBox
ToolStripTextBoxX
当前位置Y坐标值
ToolStripTextBox
ToolStripTextBoxY
网格显示
ToolStripMenuItem
网格显示ToolStripMenuItem
放大选取框功能
ToolStripMenuItem
放大选取框功能ToolStripMenuItem
坐标自动调整
ToolStripMenuItem
坐标自动调整ToolStripMenuItem
默认坐标范围
ToolStripMenuItem
默认坐标范围ToolStripMenuItem
回到目录
3.3 控件工作流程的设计
波形显示控件设置了两个影响显示方式的标记：
标识当前是否处于放大查看模式，以及标识当前坐标是否自动调整以适合窗口大小。
作为波形显示控件的私有成员变量，如下所示：
privatebool_isBigModeXY=false;//是否处于放大查看模式
privatebool_isAutoModeXY=true;//是否自动调整以适合窗口大小
若当前处于放大模式，则波形在动态显示的时候，并不自动改变X轴和Y轴的坐标范围（即使有数据点越出波形显示控件的显示范围），只有在放大选取框进行局部放大的时候改变X轴和Y轴的坐标范围。
若当前非放大模式，且为自动调整坐标模式，则遍历要显示的数据值，确定要显示的最大坐标范围，然后修改X轴和Y轴的坐标范围。
整个波形显示控件的显示方式判断和实现过程，设计为在中间波形显示区域pictureBoxGraph的OnPaint消息中。
具体波形显示的工作流程如下所示：
图32 控件工作流程
4 波形显示控件各细节的实现
4.1 坐标值和标尺的实现
4.1.1 坐标相关的成员变量
因为控件存在局部放大的功能，所以局部放大后的坐标轴起始值和结束值通常会是浮点数。
仅仅根据坐标轴两点的浮点数值难以描绘出符合用户视觉的坐标线和坐标值。
因此引入了坐标标定值的概念，得到下列私有成员变量：
privatefloat_fXBegin;//当前显示波形的X轴起始坐标值
privatefloat_fXEnd;//当前显示波形的X轴结束坐标值
privatefloat_fYBegin;//当前显示波形的Y轴起始坐标值
privatefloat_fYEnd;//当前显示波形的Y轴结束坐标值
privatefloat_fXBeginGO;//当前显示波形的X轴坐标标定起始值
privatefloat_fXEndGO;//当前显示波形的X轴坐标标定结束值
privatefloat_fYBeginGO;//当前显示波形的Y轴坐标标定起始值
privatefloat_fYEndGO;//当前显示波形的Y轴坐标标定结束值
具体的意义如下图所示：
图41 坐标相关成员变量的意义
由上图可知，_fXBegin和_fXEnd代表的即为实际的坐标起始值和结束值（如上图中的起点值0和终点值60），而_fXBeginGo和_fXEndGo在用户使用波形显示控件的时候并不会显示出来，仅仅用于内部坐标标尺的计算，见下图：
图42 _fXBeginGo和_fXEndGo的意义
其具体表示的值通常在波形显示控件表示范围的外侧，上图中_fXBegin的值为21.67，而_fXBeginGo的值为10，_fXEnd的值为52.96，而_fXEndGo的值为60。
这样设计坐标就能够根据_fXBeginGo和_fXEndGo设计出符合用户视觉的坐标线和坐标值，例如上图中显示的坐标值30、40、50，并不是简单地将_fXBegin和_fXEnd等分得到的。
回到目录
4.1.2 坐标标定权值的概念
在确定了双坐标模式后（坐标值和坐标标定值）。
用坐标值来描述实际的坐标轴的端点坐标，用坐标标定值来描述整个坐标标尺的坐标线和坐标轴上的子坐标。
这样就需要保证坐标标定值要为简单的数据，例如-10、30、0.05等，即保证该浮点值中只有一位是非零的。
于是引入了坐标标定权值的概念，定义如下：
privatefloat_fXQuanBeginGO;//当前显示波形的X轴坐标标定起始权值
privatefloat_fXQuanEndGO;//当前显示波形的X轴坐标标定结束权值
privatefloat_fYQuanBeginGO;//当前显示波形的Y轴坐标标定起始权值
privatefloat_fYQuanEndGO;//当前显示波形的Y轴坐标标定结束权值
坐标标定权值表示的是一个浮点数最高非零位对应的权，例如34的坐标标定权值为10，0.036的坐标标定权值为0.01，0的坐标标定权值设定为1。
坐标轴刻度线和刻度值通过坐标标定值来实现。
因此，可以设计一个函数，来计算一个浮点数的坐标标定权值：
privatefloat_getQuan（floatm）;
以X轴举例，_fXBegin为21.67则计算得到的_fXQuanBeginGO为10，_fXQuanEndGO为52.96则计算得到的权值为10。
之后就可以通过权值来修改_fXBeginGo和_fXEndGo，即最后得到的_fXBeginGo为10，_fXEndGo为60。
因此，在21.67到52.96范围内描绘出的子坐标值为30、40、50。
同样的，如果有需要的话，可以方便得将30到40之间的坐标标尺继续分割下去。
回到目录
4.1.3 坐标标尺的绘制
在绘制坐标标尺前，先判断起始坐标权值和结束坐标权值哪个大，并从权值大的方向往权值小的方向绘制标尺。
计算出当前权值下可分多少段坐标，而后转换为实际要描绘的像素位置（在pictureBoxBottom和pictureBoxLeft中）。
if（_fXQuanBeginGO<=_fXQuanEndGO）//X轴从右往左画
{//……
linesQuan=_fXQuanEndGO;//获得两权的大值
linesNum=（_fXEndGO-_fXBeginGO）/linesQuan;//可以分成的线段
pxwidth=//所要画坐标的像素范围
（float）（width-100）/（_fXBegin-_fXEnd）*（_fXBeginGO-_fXEndGO）;
pxLine=pxwidth/linesNum;//每段坐标线间隔
pxGO=//所要画坐标的起点像素位置
（_fXEndGO-_fXBegin）/（_fXEnd-_fXBegin）*（width-100）+50;
//……
回到目录
4.1.4 子标尺线的选择性显示
根据每段坐标线间隔，可以设计出符合用户视觉的子标尺线，如下图所示：
图43子标尺线的选择性显示A
图44子标尺线的选择性显示B
当波形显示控件被拉伸到足够大的时候，子标尺线能够选择性的显示。
升级会员 