构建仪表、图表控件的绘制框架

2016-01-29 12:10 116 1 收藏

构建仪表、图表控件的绘制框架,构建仪表、图表控件的绘制框架

【 tulaoshi.com - C语言心得技巧 】

构建仪表、图表控件的绘制框架

作者:么硕

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com)

下载源代码

开发环境: VS2003 + Windows XP SP2
测试环境: Windows XP SP2

Demo截图

  编写图形相关的控件需要完成两部分:1 绘制;2 与窗口类(泛指)集成使之成为控件。本文重点在于“绘制”部分,提出一个较灵活的框架。用VC的GDI+实现框架,并在Demo中简单封装成圆表和直表控件。图一是要实现的目标(圆表、直表等仪表,指示灯,图表,旋钮,滑块等),由这些目标,经需求分析后,设计出框架。


图一

框架的建立

  “如果说我比别人看得更远些,那是因为我站在了巨人的肩上”。.Net上开源图表控件比较多,在这里我们分析一下MS Graph Demo。图二 是其绘制Pie图表的类图。


图二 MS Graph Demo绘制Pie图表的结构

PieSlice表示Pie中的单个扇形,_value用来计算百分比,_color是此扇形的填充颜色。
PieSliceCollection是PieSlice集合。
PieGraph类内置一个PieSliceCollection对象,类中其它的数据是描述Pie整体的数据(宽高,边框宽度,背景颜色……)。
PieGraphRenderer类通过 DrawGraph函数绘制Pie图,类内置一个PieGraph对象。
此结构有诸如数据结构和算法的分离等的优点,但也有它的局限性。1 它的框架是建立在功能分类上的,如,Pie图、Bar图。PieSlice中不仅有功能数据_value还有外观数据_color。假如不再填充纯色,而是填充图像,那么就必须修改PieSlice,增加_image:Image属性; PieGraphRenderer也需相应的修改。假设将上述修改扩展到Pie图表以外的其它类型的图表,如:Bar图表、A图表、B图表,那么BarSlice、ASlice、BSlice,及三者相应的Renderer类也必须修改,工作量多且重复。2 在应用过程中,当需要把Pie图对象转换成Bar图对象时,MS Graph Demo的现有框架便不能实现。
由此可见,MS Graph Demo的框架不够灵活,原因在于功能数据和外观数据没有分离。
图三是我所设计的框架,用一句话概述:由YFillBase填充形状(YShapeBase),逻辑(YPaintBase)负责把形状组合起来。


图三

  框架由三个基础类YPaintBase,YShapeBase和YFillBase组成。其中YFillBase是填充基础类(简称“填充”),它负责对象颜色、图像的填充,边框等。YShapeBase是基本图形基础类(简称“形状”),由此类派生出简单的基本图形,如:圆,三角,五角星,特殊指针样式……。YPaintBase是逻辑组合基础类(简称“逻辑”),由YPaintBase把YShapeBase和YFillBase进行组合,构建出复杂图形,而复杂图形可由YPaintBase的派生类再次组合。
图四演示了应用框架构建仪表控件的背景和指针。


图四

  由YShapeBase派生出,将YPointer对象的pShape指向YRectangle对象,就可以得到矩形指针。同理将YBackground对象的pShape指向YRectangle对象,就得到了矩形背景(图五)。


图五

如果需要升级,添加新的形状如三角形YTriangle(图六),也就相应得到了三角型指针和三角形背景。


图六

同样由YFillBase派生一种特殊的图片填充YFillImage(图七),其它地方的代码不用修改,就可以得到用这种填充的任意形状指针和背景。


图七

在实际项目中,类似指针,背景的元素很多,应用此框架可以使编码减少,功能倍增,易于升级、维护。


图九

下图演示应用框架构建类似MS Graph Demo的Pie图表和Bar图表,是不是很容易加入填充图像和在Pie图Bar图间转换^_

来源:http://www.tulaoshi.com/n/20160129/1484909.html

延伸阅读
标签: Web开发
jqplot是基于一个基本的jqplot.js文件,并有多个js文件支持的插件——也就是说jqplot.js文件只能支持线状图的绘制,对于饼状图,柱状图等图形需要引入pieRenderer.js等文件。 这里参照jqPlot的官方文档,以饼状图为例简单的说一下jqPlot的用法: 第一步,引入js文件(如果是画线状图之外的其他图表,需要引入相关js文件,这里引入饼状图文件pi...
标签: PHP
    我们程序员是自相矛盾的懒汉。我的意思是我们会花上数小时甚至几天的时间来创建一个东西,让我们用 30 秒钟完成 5 分钟才能完成的任务。因此, Zend 框架的创建也许不是一件太让人惊奇的事情。您尚未听说过 Zend 框架吗?不要急 —— 您会了解的。本文概要介绍了 Zend 框架,解释了它的一般概念,并为 “理...
标签: PS
PS绘制设计精致汽车仪表盘图标   绘制设计精致汽www.Tulaoshi.com车仪表盘图标!
标签: Web开发
话说Buffalo是姓中的写的,支持下国产! 来先顶一个。 Buffalo处理Ajax有多牛,嘿嘿 我还真没有正儿八经的整过。惭愧啊,争取在最近好好研究下吧。 Buffalo支持和Spring整合。嘿嘿 这也是一个亮点。亮的有些不自在。为啥?   假如你用Spring+Struts+Hibernate来构建的轻量级J2EE框架,Spring和Struts整合有好几种方式,有一种方式不要要论...
Photoshop绘制金属控件图标 控件需要制作的部分较少:有底座、面板、控键等几部分。制作的时候只需要用路径等工具做出各部分的形状,然后用图层样式加上质感图老师和颜色即可。 最终效果 新建一个256 * 256像素文件,分辨率为300,如下图。 1、使用圆角矩形工具,设置半径值为60像素,按住Shift键绘制带有圆角的正方...

经验教程

541

收藏

91
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部