支持虚拟场景图形交互系统的设计与实现

　　在分析SVG特点基础上,以支持虚拟场景的网络售票系统为例,介绍SVG在数据驱动图形交互Web领域中的应用。通过SVG与JavaScript技术解决SVG图形元素的重用及客户端响应的动态生成。

前言

　　随着Internet网络技术的发展,图形图像在网络上的应用越来越广泛,最常见的是网络信息发布中的图形图像内容,这些内容在早期以HTML为基础的Web浏览技术中不能得到直接支持,有关图形图像信息都要通过图片或动画等方式表现出来,该方式导致网络中传输的图形图像数据量大,且在不同设备上显示效果不同等.针对上述问题,W3C组织提出了统一的可升级矢量图形规范标准Scalable Vector Graphics (SVG),并几经修订后于2003年1月发布了SVG 1.1版本,成为W3C的推荐标准。

1　SVG特点与应用

1.1 SVG特点

　　作为网络中矢量图像图形的工业标准,SVG不仅与现有的其他相关开放标准如DOM,XML,XSL,XHTML等相互兼容,与其他网络图像格式如GIF,JPEG,SWF等相比,SVG具有更好的扩展性和更广泛的应用范围.概括起来,SVG具有下列特点:1)基于XML标准:XML具有优秀的可扩展性,基于XML的SVG在网络应用中,可以开发出更多新的网络服务,如数据驱动的图形图像显示与处理.图像中的数据可以根据需要,由应用程序读取、修改和统计,并最终体现在动态图像中;2)高质量的图形图像:SVG作为矢量图像格式具备了矢量图的优点,如保证图像的显示不会因拖动或缩放等操作而受损,SVG支持矢量滤镜,可以制作各种滤镜效果.同时,高效的SVG词汇表大大缩减了图像文件的大小,适合在网络中传输和应用;3)灵活易用的文本格式:作为基于文本的格式,SVG图像中的文字也是文本格式,因此,SVG中的文字可以被网络搜索引擎作为关键词搜寻,可以很容易实现基于SVG的高效的图像搜索引擎;4)支持交互:SVG完全支持DOM(文档对象模型),因而SVG以及SVG中的图像对象可以通过脚本语言接收外部事件的驱动,如鼠标与键盘的各种动作.

1.2 SVG的应用

　　SVG在相当多应用领域能够得到广泛的应用.如在WebGIS、无线设备、图像搜索引擎以及数据驱动的图像交互Web系统等领域的应用.本文所述属于SVG在上述最后一个方面的应用.

1.3 网络售票系统的实际需求

　　在当前网络快速发展以及网络支付手段日益成熟的情况下,网络售票从多方面满足了相关人群的需要,目前已有众多知名网站开通网络售票业务,包括飞机售票、音乐会和体育比赛的售票等.以体育比赛为例,多数情况下,类似系统使用位图技术,展现给用户一个场馆的地图,然后必须通过屏幕上静态的无法变化的位图进行选择.然而,用户在购票前所需要了解的信息远不止一张位图能描述的.如用户首先需要了解尚有哪些座位可供购买,这些座位在比赛现场能看到的场景如何,还可能了解不同座位的价格信息、多个座位之间的位置关系以及座位的入场路线图等.以上这些要求,使用标准的位图文件是难以实现的,因为这需要创建足够多的图形来满足不断变化图形信息的需要。
　　SVG可以满足上述需求.作为网站上一个生动的文本文件,SVG可以根据输入其中的数据,不限次数地动态更新.本文中利用SVG基于XML文本的特性及其对图像交互的支持,分别采用Servlet和JDBC技术,建立应用服务器及其与后台数据服务器的连接，进而设计并实现了具有虚拟场景支持的图形交互应用系统。

2　系统架构

　　综合分析网络售票系统特定需求和SVG对图形对象的支持,基于SVG网络售票系统具有如下特点:首先是SVG的动态生成.通过预先创建关于场馆基本场景的SVG文本以及用于交互的脚本代码原型,并存储于服务器指定的位置,用这些基本信息与脚本代码可以动态生成用户浏览场景的
SVG文本信息；其次是图形的数据驱动。场馆座位的相本信息如位置、价格等需要存储在数据库服务器中,驱动SVG文本的生成,同时用户与SVG的交互的结果也将改变数据库中的信息,如座位被订购等;最后是客户端SVG的浏览.目前WebBrowser还不能直接浏览SVG信息,需要额外的SVG插件辅助完成SVG图的缩放与显示.基于上述分析,本文提出一种基于代理服务器的系统架构,如图1所示。

图1 基于代理服务器的系统架构

3　系统实现

　　从系统架构图中可以看出 ,系统实现主要集中在中间层的代理服务器上面. 以下分别介绍与代理服务器相关的各个功能的具体实现。

　　3.1 SVG与JavaScript

　　描述座位图的seat.svg通过SVG编辑器独立完成并预先存储于代理服务器指定的位置.座位图如图2所式. 图2 座位图

　　seat.svg文本中加入JavaScript脚本代码处理图形上的鼠标事件,使seat.svg中的座位支持鼠标交.从用户的角度,每一面看台的座位都具有不的连接,进而设计并实现了具有虚拟场景支持的图形交互应用系统.互同的显示,但同一面看台中不同的座位对用户具有相同的视角,显示样式一样,只是位置坐标不同.基于上述考虑,在编辑SVG元素时,只需创建四类座位,每类座位通过具有标识的组元素<g>来实现,同一类中其他座位则通过<use>元素来引用组标识,同时赋予不同的坐标值.具体SVG文本如下:

　　编辑生成的SVG文本将作为场景的静态模板,用于动态生成用户视角的SVG图形响应客户的请求.上述SVG文本中的座位标识ID,将作为座位的唯一存储于数据库中,动态生成SVG场景图时根据座位ID进行匹配.
　　上述SVG文本中完成交互功能的JavaScript脚本代码如下,该段代码处理SVG上的鼠标动作,并高亮度显示鼠标所指的座位.

functionme(evt_type,evt){
var target=getEventTarget(evt);
if(!target)
　　return;
var id=""+target.getAttribute('id');
if('c'==evt_type){
　　clickImg(id);
}
else if('on'==evt_type){
　　onImg(id);
}
else if('off'==evt_type){
　　offImg(id);
}
}

　　3.2 代理服务器的实现与SVG的动态生成

　　系统中间层的代理服务器是该系统的主要部分,代理服务器处理客户端的请求,动态生成用户视角的虚拟场景图SVG,同时根据座位的购买情况动态修改数据库.代理服务器采用Servlet实现,一个具体的请求响应过程如图3所示,在Servlet的初始化过程中通过JDBC建立与数据库服务器的连接.

图3 图形交互页面请求响应过程

　　在实现上,该Servlet继承HttpServlet类,并重载了init()、doGet()与doPost()三个方法.在init()方法中完成与数据库的连接,确定SVG模板与JavaScript脚本文件的路径.在客户端请求通过Web服务器传给Web容器,自动调用Servlet的service()方法,service()方法根据请求的方法类型确定调用doGet()或doPost()的一个.在重载的doGet()或doPost()方法中,根据请求中参数类型索引值确定响应的动作与响应内容.如参数类型索引值为0,表示客户请求浏览当前用户视角的座位及其状态图,此时调用SendMainPage()过程动态创建内嵌SVG的HTML并响应该请求;下面代码给出Send Main Page()调用动态创建用户响应内容.

public void sendMainPage(Http Servlet Request req,Http Servlet Response res)
th row s Servle tExcep tion, IO Excep tion{
……
//读取座位状态值
ResultSet rs1=mystmt.executeQuery("Select CID,SoldStatus From Seat Order By CID");
rs1. beforeFirst();
while(rs1.next()){
……
}
……
//逐行扫描SeatSVG.htm,其中引用JavaScript文件
//SeatSVG.js与SVG文件SeatSVG.svg,并向客户端
//输出对应的响应
String str;
File F1=new File(FilePath+"SeatSVG.htm");
FileReader fr=new FileReader(F1);
BufferedReader br=new BufferedR eader(fr);
while((str=br readLine())!=null){
if(//one of several cases){
……
}
else if(-1!=str index Of("#Path#")){//SVG element
}
else if(-1!=str index Of("")){
out println("<script language="JavaScript">");
……
}
……//other else if cases
else{//default case;echo to response stream
out println(str);
}
}
}

3.3 其他功能的实现

　　在JavaScript脚本文件SeatSVG.js中,不仅有控制用户交互、不同状态座位的显示等过程,还包括价格的显示、场次的选择以及座位的搜索,购票单的生成等代码.

4　结论

　　利用集成了SVG的XML文档为网络中的图形图像信息提供支持,不仅有力地克服了HTML在图形浏览等方面的缺陷,更可以利用SVG本身文本的特性,根据输入其中的数据,不限次数地动态更新SVG的内容,这样就可以很容易构建需要大量图形图像信息显示与处理的系统.同时SVG提供了丰富的消息触发及事件响应函数,便于构建具有图形图像交互功能的系统.本文利用服务器端技术Servlet将数据驱动的SVG应用与后台数据库服务器集成起来,实现支持虚拟场景的网络售票原型系统,该系统的部分辅助功能如购票单的生成、路线图的绘制以及网络支付等方面尚在完成过程中.

参考文献

　　[1]　W3C.ScalableVectorGraphics(SVG)1.1Specification[EB/OL]. http://www.w3.org/TR/2003/REC-SVG11-20030114/.
　　[2]　王仲,董欣.SVG一种支持可缩放矢量图形的Web浏览语言规范[J].中国图像图形学报,2000,5(12):1040～1043.
　　[3]　BillTrippe,KateBinder著,高伟,英宇译.SVG设计-在下一代Web站点中使用可缩放矢量图形[M].北京:机械工业出版社,2003.
　　[4]　VladimirBATAGELJ,SVG-ANewDimensioninProducingInteractiveNetbooksJ/OL].http://www.educa.fmf.uni-lj.si/izodel/dela/SVG/paper.doc.
　　[5]　SVGZone-Datadrivengraphics[R/OL].http://www.adobe.com/svg/overview/datadriven.html.
　　[6]　陈芳,徐学军.XML/Java技术在WebGIS中的应用与实现[J].电力系统及其自动化学,2003,15(1):46～50.
　　[7]　郭立君,张荣.基于网络图形编辑器模型及实现[J].计算机工程与应用,2001,6:46～50.
　　[8]　MikeDJones.BringdynamicJavaScriptinteractionstoSVGgraphicsJ/OL].http://www.elementkjournals.com/wdv/0101/wdv0111.htm

关于作者

浙江宁波大学信息科学与工程学院,315211

(THE END)

SVG中国