基于SVG的图形交互技术研究

第７卷第８期　２００８年８月　软件导刊　ＳｏｆｔｗａｒｅＧｕｉｄｅ　Ｖｏ１．７　ＮＯ．８　Ａｕｇ．２００８　基于ＳＶＧ的图形交互技术研究　张咏梅　．董丽娟　（１．西华师范大学网络中心，四川南充６３７００２；２．中州大学网络教研室，河南郑州４５０００５）　摘要：分析了ＳＶＧ的特点以及当前Ｗｅｂ图形处理技术的不足，为了更有效地组织空间数据和提高网络环境下图形　交互功能，结合ＳＶＧ的结构特点设计了图元数据库，提出了基于ＳＶＧ的网络图形编辑系统模型。解决了图形编辑交　互、ＳＶＧＩ￣ｔ形数据的网络传输等问题，有效减少了交互时网络数据的传输。　关键词：ＳＶＧ；图形交互；图元　中图分类号：　ｒＰ３９１．４１　文献标识码：Ａ　文章编号：１６７２—７８００（２００８）０８—０１１３—０２　动态的统一。　１　图形交互技术的发展现状及趋势　２图形交互技术的实现　图片和交互在以前是两个分开的概念。例如在一个网页　中，按钮仅仅是一个图像，按钮的交互部分是由网页中的Ｓｃｒｉｐｔ　语句来实现。以往的交互技术多是在ＨＴＭＬ页面中嵌入～个ＪＳＰ　页面。负责读取数据的工作，通过页面刷新来实现数据的定时　２．１图形交互模型设计　基于ＳＶＧ技术的图形交互模型可以采用三层结构，分别为：　表现层、逻辑层和数据层。在表现层，通过浏览器查看页面。　ＨＴＭＬ页面包括两个部分：一是嵌入的ＳＶＧ页面；二是Ｊａｖａ　读取。每当ＪＳＰ读出数据后，根据数据变化情况输出相应的Ｊａｖａ　Ｓｃｒｉｐｔ语句到隐藏页面中，最后利用Ｊａｖａ　Ｓｃｒｉｐｔ来改变元素的显　示属性。该方法是通过在服务端输出Ｊａｖａ　Ｓｃｒｉｐｔ语句到客户端　Ｓｃｒｉｐｔ脚本程序。在逻辑层为Ｗｅｂ服务，主要处理逻辑业务。最　后是数据层．它主要提供实时数据。如图１所示。　来实现的．这样使得服务器端与客户端不具有松散耦合性，同　时服务器端的实时数据不具有重用性。　ＳＶＧ的使用突破了以往图形交互的不足，它支持ＳＭＩＬ　（Ｓｙｎｃｈｒｏｎｉｚｅｄ　Ｍｕｌｔｉｍｅｄｉａ　Ｉｎｔｅｇｒａｔｉｏｎ　Ｌａｎｇｕａｇｅ），使得在图片内　进行交互成为可能，这是以往的图像所不能做到的。可以说，　ＳＶＧ的“矢量描述”并不是一个全新的概念，但它综合了矢量图　形、点阵图像和纯文字的优点，以一种标准将其统一起来描述，　这较之于目前网络上流行的压缩式点阵图像有着无与伦比的　优势。况且，文字与图形并非封装于ＳＶＧ内，而是可以借助ＤＯＭ　￣ＩＳｃｒｉｐｔ等手段与外界交互．这更非一般的ＧＩＦ或ＪＰＥＧ图像可　比。　ｌ　图１图形交互模型　ＳｏＡＰ　ｌ　２．２图元数据库设计　将数据保存在服务端数据库中，在用户对图形进行放大、　缩小等交互操作时，可实时地从数据库中调取相应范围的数据　生成ＳＶＧ文档显示在客户端。这种数据保存方法不仅安全可　要使ＳＶＧ图形能够表现动态效果，对图形在客户端的操作　及时显示和刷新，就需要与Ｊａｖａ　Ｓｃｒｉｐｔ结合。ＳＶＧ支持Ｊａｖａ　Ｓｃｒｉｐｔ脚本语言，同时也是基于ＸＭＬ的文档．因此在客户端可　靠，而且具有较高的效率。当图像需要交互变化时，在客户端和　服务器端之间只传输改变的增量数据，利用客户端平台的处理　能力显示图形，这样可以减少服务器负载和带宽占用量。为了　能够方便地取出图元数据库数据生成ＳＶＧ文件，所以需要在数　据库设计上充分考虑这种变换的方便性．笔者将数据库中的表　结构设计为尽可能地接近以后将要生成的ｓｖｇ文件的数据结　以利用ＪａｖａＳｃｒｉｐｔ将ＳＶＧ作为ＸＭＬ文档处理。Ｊａｖａ　Ｓｃｒｉｐｔ接收　到服务器端的部分数据后．使用ＤＯＭ进行解析返回的ＸＭＬ文　本，获取元素的ＩＤ、属性名称、属性值。根据这些信息来动态地　改变ＳＶＧ中对应元素的显示属性，最后使ＳＶＧ中的元素反应出　数据的变化情况，实现了客户端表现效果动态与服务器端数据　作者简介：张咏梅（１９７７～），女，陕西蒲城人，西华师范大学网络中心助理研究员，研究方向为网络管理；董丽娟（１９７９－），女，河南平顶山人，中州大　学网络教研室助教，研究方向为计算机教学。　・１１４・　软件导刊　２００８焦　构。　图形数据库的结构可以设计为图元一图形一图形数据库　三级结构，总体结构如图２所示。　第—级　个网片的数据给客户端，因此只需要传输过来当前的增量数　据，告诉这条直线应该放在哪里。在ＸＭＬ框架中将需要改变节　点的信息写入，如在图签分组中加入一个Ｌｉｎｅ图元，调用　ＪａｖａＳｃｒｉｐｔ脚本让ＳＶＧ的这条直线显示或改变即可。这样就实　现了图表的实时刷新，无需页面刷新，无需重新生成图片，并且　网络端、服务器端、用户端的开销都非常少，导致内存溢出的风　第二级　险大大减小。　在客户端实现用户与图形的交互。在用户进行放缩等交互　时，向服务器端传递一个ＵＲＬ，该ＵＲＬ的参数应包含一些相关　第三级　图２图形数据库的结构　在数据库中为第二级中的图形分组设计一个Ｔ＿Ｇｒｏｕｐ表。　表中记录分组的ＩＤ号。同时记入每个分组所需要的图元ＩＤ，在　搜索时可以很方便地按照类型分组找到需要显示的图元信息。　第三级为各个分组中的图元，由于ＳＶＧ定义了六种基本形状，　因此在第三级设计６个图元表。图元表分别为：Ｔ＿Ｃｉｒｃｌｅ，Ｔ　Ｅｌ—　ｌｉｐｓｅ，Ｔ＿Ｒｅｃｔ，ｒｒ＿Ｌｉｎｅ，ｒｒ＿Ｐｏｌｙｌｉｎｅ，ｒｒ＿Ｐｏｌｙｇｏｎ。为了保存文字信息　及每个图元的属性信息再设计３个表，分为：　ｅｘｔ，Ｔ＿Ｐｒｏｐｅａｙ，　Ｔ＿Ｆｏｎｔ。　Ｔ＿Ｐｒｏｐｅｒｔｙ表中保存图元的属性信息，如ｆｉｌｌ，Ｓｔｒｏｋｅ，　Ｓｔｒｏｋｅ＿Ｗｉｄｔｈ等信息；Ｔ＿Ｆｏｎｔ表中保存　ｒ＿Ｔｅｘｔ表中对应的文本属　性，￣ＮＦｏｎｔＳｉｚｅ，ＦｏｎｔＦｉｌｌ，Ｆｏｎｔ＿——Ｓｔｒｅｔｃｈ等信息．　程序中的每个图元对应一种方法，可将其对数据库的操作　封装进去。在创建数据库过程中，每次加入包含不同图元信息　的ＩＤ后，ＩＤ计数自动加１。由于图元的Ｔ＿Ｐｒｏｐｅｆｌｙ属性表和　Ｔ＿Ｆｏｎｔ表会出现大量的冗余信息．为了增加数据的重用性，减　小数据库体积，可将这两个属性ＩＤ的计数变量设为全局变量。　Ｔ＿Ｇｒｕｒｐ表和．ｒ＿ｐｏｌｙｌｉｎｅ表和设计分别如表图１、表２所示。　表１　ＴＧｒｏｕｐ表的设计　表２　ＴＰｏｌｙｌｉｎｅ表的设计　２．３图形交互的处理　对于实时性要求比较高的系统来说，不可能要求用户随时　刷新页面，或者使用ＪａｖａＳｃｒｉｐｔ来定时刷新页面．这样效果非常　差，而且服务器端反复在内存或者硬盘中生成图片，用户数量　过多，系统负担过重。实际上对于所要交互的图片，也许只想改　变图片的一条直线，根本没有必要生成整个图片或者是传递整　信息，如ｘ最小坐标、ｖ最小坐标、ｘ最大坐标、ｖ最大坐标。把这些　参数发送到服务器进行处理，将新矢量数据转成的ＳＶＧ文件传　到客户端。在处理时先将ＳＶＧ数据按逻辑结构在内存中组织成　树型结构．再对内存中的结点树进行各种操作，数据一层层地　下载并显示出来。　在服务器端．接受请求的Ｓｅｒｖｌｅｔ读取客户端传来的ＵＲＬ参　数并解析。经过计算处理获得包含请求范围和相应图层的ＳＶＧ　文档数据，并传给客户端。由于Ｊａｖａ　Ｓｃｒｉｐｔ与ＳＶＧ的图形代码混　合在一起，不易维护．所以ＳＶＧ使用外部脚本这种引用方式。　ＳＶＧ文档被载入后．调用初始化程序，以获得ＳＶＧ的ＤＯＭ结构，　为后续的编程做好准备。利用Ｊａｖａ　Ｓｃｒｉｐｔ在客户端创建和初始　化ＸＭＬＨＴＴＰ．经过服务器端的处理后，再接收来自服务器的基　于ＸＭＬ的响应文档．然后再利用Ｊａｖａ　Ｓｃｒｉｐｔ在客户端创建和初　始化ＳＯＡＰ包。在封装的过程中必须遵循ＳＯＡＰ标准。客户端接　着向服务器发送Ｈ１丫ｒＰ请求，ｗｅｂ服务接收到请求后解析参数，　根据参数从图元数据中获取增量数据，并以ＸＭＬ数据格式返　回。客户端则利用ＸＭＬＨＴＹＰ接收服务器端返回的ＸＭＬ数据。　３　结束语　本文结合图元数据库介绍了网络图形交互的模型，充分利　用了ＳＶＧ在适量图形信息描述上的优点，有效地克服了ＨＴＭＬ在　图形浏览、交互等方面的缺陷，在实际应用中取得了很好的效　果。　参考文献　［１］　Ｒｙａｎ　Ａｓｌｅｓｏｎ，Ｎａｔｈａｎｉｅｌ　Ｔ．Ｓｃｈｕｔｔａ．Ｆｏｕｎｄａｔｉｏｎｓｏｆ　ＡＪＡＸ［Ｍ］．Ａ—　ｐｒｅｓｓ　Ｌ．Ｐ，２００５．　［２］　Ｗ３Ｃ．Ｓｃａｌａｂｌｅ　Ｖｅｃｔｏｒ　Ｇｒａｐｈｉｃｓ（ＳＶＧ）１．１　Ｓｐｅｃｉｉｆｃａｔｉｏｎ［ＥＢ／ＯＬ］．　［２００３－０１－１４１．ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒＳ／ＴＲ／２ＯＯ３／ＲＥＣ—Ｓ，Ｇｌｌ一　２００３０１　１４／．　［３］李瑞芳，袁满，孙永东．基ｆｆ－ＳＶＧ的油田ＷｅｂＧＩＳ平台的关键技　术［Ｊ］．大庆石油学院学报，２００６（３０）．　［４］　王仲，董欣．ＳＶＧ一种支持可缩放矢量图形的Ｗｅｂ浏览：言规范　［Ｊ］．中国图象图形学报，２０００（１２）．　［５］　陈芳，徐学军．ＸＭＬ／Ｊａｖａ技术在Ｗｅｂ　ＧＩＳ中的应用［Ｊ］．电力系统及　其自动化学报，２００３（１）．　［６］　郭立君，张荣．基于网络图形编辑器模型及实现［Ｊ］．计算机工程　与应用，２００１（６）．　（责任编辑：赵峰）