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的基本技术实现图形化,不需要任何的扩展或支持。?
缺点:图形非矢量,曲线情况下平滑度不够,图形较多时性能存在一定的问题。?