Web图形开发

Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案。

Web图表一般有以下几种做法: 

(1)使用客户端控件技术 

(2)使用服务器端生成图片 

(3)使用富客户端技术 

1、使用客户端控件技术 

应用微软的ActiveX控件以及Java的applet技术对图形的支持来显示一个图表。这种方式显然对于客户端要求太高,插件的开发相对麻烦,随着现在主流浏览器放弃对控件的支持后,这种方式只适合一些局域网的应用,而对于因特网的环境就显得不太适合。

2、使用服务器端生成图片 

直接在Web服务器端生成好图表图片文件后发送到浏览器。 

优点:服务器端生成图形,减轻客户端负担。 

缺点:Web应用时,特别是动态生成图片,会产生大量的冗余图片数据。 

3、使用富客户端技术 

根据服务器返回数据在浏览器端绘制图表,一般有以下几种方案: 

(1)VML技术 

VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。 

优点:基于XML标准,支持高质量的矢量图形显示。结合脚本,可以让图形产生动态的效果。

缺点:只能在IE浏览器或以IE为内核的浏览器才能用VML。 

(2)SVG技术 

SVG(可放缩的矢量图形)是W3C在2000年8月制定的一种新的二维矢量图形的格式。 

优点:基于XML标准,采用文本来描述对象,具有交互性和动态性,完全支持DOM。 

缺点:IE则依赖Adobe Systems的一款插件支持SVG。用户必须下载、安装这款插件才能在IE中显示SVG格式图像。 

(3)多比控件 

多比图形控件出现简化了这种开发难度,它是一款基于Web的矢量图形控件,能够检测浏览器类型,自动选择VML或SVG方案进行做图,类似于网页上的Visio控件,是目前国内外最佳的基于Web矢量图案解决方案。多比图形编辑器实现了图形、图像、文字的有机统一。它除了支持HTML中常用 的标记,如文本、图像、链接、交互性、CSS的使用、脚本外,还提供了大量针对图形、图像、动画的特定标记。对SVG图形文件进行编辑管理的过程为:SVG图形文件经XML解析器打开,并在内存中生成一个对象树,用鼠标事件来驱动脚本执行,脚本通过DOM接口对象进行相关的操作,来实现图形绘制、编辑等功能。 

(4)Flash技术 

Open Flash Chart是一个Flash图表组件,很容易安装,提供以下语言的API:PHP、Perl、Python、Java、Ruby on Rails、.NET来控件图表。 

优点:图形效果好,根据服务器数据生成相应的图形,可以适当编写事件处理。 

缺点:需要Flash插件支持,绘制特定的图形需要专业的Flash技术支持。 

(5)Canvas技术 

<canvas>是一个新的HTML无素,这个元素可以被Script语言用来绘制图形。例如可以用它来画图、合成图像、做简单的动画。 

优点:基于标准规范、灵活绘制各类图形。 

缺点:IE需要使用canvas.js类支持图形的扩展。 

(6)JavaScript图形库技术(jsgraphics) 

JavaScript图形库可以在网页上动态绘制圆、椭圆、斜线、折线、多边形(三角形、矩形)。底层通过创建大量1px*1px的DIV实现,同时对于连续的像素进行优化,尽量地减少所需的DIV,因此有较好的性能,当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML、HTML 、Canvas是无法相比较的。

优点:使用Web的基本技术实现图形化,不需要任何的扩展或支持。 

缺点:图形非矢量,曲线情况下平滑度不够,图形较多时性能存在一定的问题。 


原创地址:http://blog.csdn.net/oscar999

 

posted @ 2013-07-26 14:07  飛雲若雪  阅读(4284)  评论(0编辑  收藏  举报