SVG——新一代Web设计及互动媒体的革新
首页 解决方案 WEB应用 基于SVG的Web页面动态刷新

基于SVG的Web页面动态刷新

杨恒,徐学洲 2008-08-03 来源:

SVG中文乱码解决方法　 　文中将SVG图形显示技术和Web页面动态刷新技术相结合,实现了Web复杂图形的实时更新。Web页面动态刷新是指当服务器端数据发生变化或者事件发生时,可以将信息或数据通知客户端,实现客户端Web页面现实内容的改变。

来源：SVG中国(ChinaSVG.COM)

前言

　　随着Internet应用的日益深入,各种各样的Web应用对图形及其动态更新提出了越来越多的要求。而SVG作为一种矢量图形标准,以其丰富的图形显示能力,为Web页面提供了复杂图形显示的支持。页面动态刷新与其相结合为Web应用提供了一种新的实现架构,可以应用到许多领域,如实时监控系统或者界面较为复杂的应用系统。这样不仅可以实现大量复杂的图形的显示(如仪表、设备、报表等),同时又可使这些图形可以随着后台数据库的变更或者仪表设备运行状态的改变而实时反映出来。

1 　SVG

1. 1 　概述

　　SVG(Scalable Vector Graphics,可升级矢量图形)是由W3C在2000年8月制定的一种新的矢量图形格式,与传统的图像格式不同的是:SVG是采用XML(扩展标记语言)来描述二维矢量图形的语言,这使得SVG图像文件可以像HTML网页一样有着很好的可读性。同时由于SVG基于XML,所以可扩展性很强,并能够描述任意复杂的图形。SVG支持3种类型的图形元素:矢量绘图形状、图像和文字。

1.2　SVG的特点

　　(1) 基于XML标准。

　　XML是公认的下一代网络标记语言,拥有无穷的生命力。SVG在最开始设计的时候就基于XML,这使得它具有一种先天的优势,并且同HTML,CSS,DOM,XSL,ECMAScript,CGI一样,成为新的标准。

　　(2)矢量图形和高质量的图像。

　　由于基于矢量,使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好,在打印的时候,完全可以以印刷质量输出图片。SVG图像在客户端动态绘制,用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关,而与图形的具体尺寸无关。

　　(3)由文本构成的图像。

　　(4)灵活易用的文件格式。

　　SVG主要由3个部分组成:矢量图形、位图和文字。由于SVG文件是以文本的形式(XML)存放的,因此更改起来非常方便。也就是说,可以不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像!在页面运行的过程中,也可以对很多部分做修改。而其中的图形描述又可以被任何人重复使用。

　　(5)支持交互性。

　　SVG支持SMIL(Synchronized Multimedia IntegrationLanguage),使用户可以自由地同SVG中的元素完成一些交互动作,从而完成既定的目标,这一点在目前单独依靠图片是完成不了的,需要由网页中的Script语句来实现。

　　(6)支持字符查找。

　　(7)内嵌字型数据。

　　SVG采用了内嵌图像中所出现的文字字型数据的方法来解决动态字体问题,用户不需要下载。

　　(8)支持Xlink和Xpointer。

　　这意味着可以在SVG文档之间制作超链接,这使人们拥有一种能力,可以制作一个完全由SVG构成的Web站点。这个站点可以包含图片、文本以及拥有与用户进行交互的能力。

　　(9)更好的扩展性。

　　作为未来的图形,真正使SVG不同于其它的Web格式的是SVG在一开始设计的时候就是完全遵从XML———下一代万维网的标记语言。SVG是纯粹的XML,但是它同样保证将无缝整合现有的标准,比如:HTML,CSS,DOM(文档对象模块),XSL,JavaScript和CGI等等。另外,因为SVG遵从DOM,其脚本将类似于DHTML。给一个脚本同时应用HTML和SVG,交互和动态效果可能在HTML和SVG上使用同一套脚本,这样Web设计师和开发者打算在设计中融入SVG,将不必花费精力学习新的软件或者放弃现有的工具和技术了。

　　(10)独立性。

　　因为SVG包含一个DOM,SVG图像可以改变它们自身的填充、边框、尺寸等等,或者它们也能够对包含HTML的Web页面上的其它部分产生影响。DOM协议允许开发者使用Name属性来控制每个标签对象。这意味着所有的子对象会继承父对象的所有属性。本质上说来,SVG把图像进行实时变化的权利放在了那些掌握了JavaScript的Web开发者的手中。因为SVG是基于XML的,所以SVG图像可对用户的动作进行实时响应,所以外观、数据可以根据高亮显示的文本、鼠标移动、时间和点击数等事件反应-反作用于不同的用户。

　　(11)开放性。

　　因为SVG是一种开放格式,它可以实现和CSS,JavaScript,CGI,以及其它的一些基于Web的通用的技术的无缝整合。此外,SVG是基于Unicode编码的,就像一个标准的HTML文档中的文本一样,这意味着它可以轻易地被搜索引擎搜索到。

2　Web页面动态刷新技术

　　对页面数据动态刷新做了探索性的研究之后,发现有很多技术可以实现页面数据的动态刷新,但不外乎两种方式(基于Java平台):客户端由单纯的HTML和JSP页面构成,通过DHTML特性、JavaScript等技术来达到动态刷新页面，这方面的方法可以阅读"AJAX和SVG结合实现实时监控图表"一文来了解;另外一种方式则是在客户端页面上内嵌一个Applet,由这个Applet通过socket,http tunnel,JMS,RMI,CORBA等技术和服务端保持持久通讯,并由Applet和页面交互来达到页面数据的动态刷新，“客户端与服务器端的SVG“一文正是利用客户端技术解决动态刷新。

3　基于SVG的Web页面动态刷新实例

{reg}

3.1　实现原理

　　通过Applet和服务器端建立Socket链接,Applet收到服务器发送的消息后,调用JavaScript函数通过DOM访问SVG图形,完成Web页面的动态刷新。如图1所示。


图1 SVG的Web页面动态刷新的实现原理

3.2　建立Socket链接

　　Applet和服务器端通过Socket建立链接。

　　(1)创建Socket。

　　Java中的套接字分为客户机套接字和服务器套接字,分别通过java.net包中的Socket和ServerSocket类来实现。创建一个客户机套接字对象可以通过以下构建器来创建:

String host = “127.0.0.1”;
int port = 3434 ;
Socket clientsocket = new Socket(host,port);

　　创建服务器套接字,如下:

int port = 3434 ;
ServerSocket serverSocket = new ServerSocket (port) ;

　　(2) 系统客户端和服务器端的通讯步骤。

　　在系统中进行一个Socket通讯,大致可以分为以下几个步骤:

　　①打开Socket连接。

　　要打开一个Socket连接,首先需要在服务器上创建一个Serversocket对象,然后调用accept()方法准备响应客户机的连接请求,如:

Serversocket seversocket = new ServerSocket (3434) ;
Try{
Socket server = serversocket . accePt () ;
……
}
catch( ExcePtione) {……}

　　②在客户机上创建一个Socket对象连接到指定的服务器,如:

Socket client = new Socket (InetAddress.getLocalHost () ,3434);

　　打开连接到Socket的输入/输出流
　　打开一个输入流,可用Socket类的get InPutstream()方法,为便于客户端解释告警信息,在输入流基础上建立一个对象输入流[23] [24] [25]:

Object InputStream ois = new ObjectInputStream (clientSocket.getInputStream());

　　打开一个输出流用getOutPutstreamO方法,如:

ObjectOutputStreamoos = newObjectOutputStream ( clientSocket.getOutputStream());

　　对Socket进行读写操作

　　对Socket进行读写操作比较简单,就是对流进行读写操作即可,比如:

Object = (Object) ois. readObject () ;
oos.writeObject (s) ;

　　③关闭Socket 。

　　关闭Socket调用close()方法即可,为了保证某些操作失败的情况下Socket都能正确关闭,通常将close()放在try语句的finally语句块中。

3.3　处理流程

　　处理流程如下:

  1. HTML脚本中使用〈APPLET〉标志的MAYSCRIPT属性,以允许Java Applet小程序访问脚本;
  2. 将netscape.JavaScript包导入Java Applet小程序;
  3. 在Java Applet小程序中用JSObject类的getWin2dow()方法创建JavaScript窗口的句柄;
  4. 在Java Applet小程序中用JSObject类的getMem2ber()方法访问JavaScript对象;
  5. 在Java Applet小程序中用JSObject类的eval()方法调用JavaScript方法。
  6. 用JavaScript语言提供SVG更新接口,由Applet通过JSObject来调用。

　　例如,要改变SVG图形中矩形的所填充的颜色,可用JavaScript语言编写函数,通过DOM访问SVG图形中的元素及其属性。

　　rect.svg绘制了一个矩形,如下:

<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
　　<desc></desc>
　<rect id="rect" x="100" y="75" width="100" height=
"50" fill="white" stroke="black" stroke-width="4"/>
</svg>

　　运行的结果如图2(a)所示。

　　定义了一个JavaScript函数setFillColor来改变矩形元素的填充颜色,如下:

/* 设置矩形元素的填充颜色 */
function set FillColor (color) {
var rect = getElementbyid (”rect”) ; //通过id获取矩形元素rect
rect. setAttribute (”fill”, color) ; //设置矩形元素rect的fill属性
}
在Applet中用如下方法调用JavaScript函数:
JSObject.getWindow (this).eval (“set FillColor (‘darkgray’) ”) ;

运行结果如图2(b)所示。

图2 SVG的Web页面动态刷新的运行结果
         (a)结果一　　　　　　                　　　(b)结果二

4　结束语

　　文中通过对SVG矢量图形的特点和技术规范,提出了基于SVG图形的Web页面动态刷新实现架构。在Web页面上通过SVG图形显示图形,用JavaScript访问和修改SVG DOM的属性,实现了对SVG图形的更新和修改。在页面中嵌入Java Applet和服务器端建立和保持链接,调用JavaScirpt函数实现Web页面的动态刷新。这在许多领域,具有广泛的应用价值,如远程实时监控、电子白板等应用领域。

5 关于作者

杨恒,徐学洲:西安电子科技大学软件所 陕西 西安 710071

(THE END)

{/reg}标签:; 更多...