IT技术
2006NO.7SCIENCE&TECHNOLOGYINFORMATION
科技资讯
基于
JavaScript及JAVA的SVG交互应用
陈曦(汕头大学工515063)摘要:分析了SVG基于DOM的互动应用原理。通过利用JavaScript编程动态生成渐开线的例子,介绍了基于JavaScript编程的SVG互动应用方法;通过JAVA编程控制SVG场景的变化,介绍了基于JAVA编程的SVG互动应用方法。关键词:SVGDOMJavaScriptJAVABatik中图分类号:TP391文献标志码:A1.引言由万维网联盟W3C[1]推出的XML、SVG(ScalableVec-torGraphics)[2]及DOM(DocumentObjectModel,
文档对象模型规范)3]是密切相关的技术。SVG是XML格式的二[维向量图形技术,在
网络地图、网络二维动画中有着广泛的应用潜力;DOM规范为处理存储在XML文档中的信息提供了一组标准编程接口,DOM规范中的DOM事件(DOMEvent)可用来编写SVG交互应用
程序;SVG标准中与DOM相关的专门说明为DOM技术在SVG中的应用奠定了基础。作者所在的网络图形应用研究小组主要研究基于XML格式的SVG、X3D应用方法,对SVG动画进行过应用研究[7]。DOM技术及其应用是研究的重点内容之一,是实现复杂SVG交互应用的关键。论文介绍了应用JavaScript及JAVA语言的SVG交互应用方法,具体的实现也是基于SVG的DOM分析及处理。2.基于JavaScript语言的SVG交互应用人们可以在IE等网络浏览器上通过安装SVG插件观看与Flash动画类似的SVG动画及互动内容。由于JavaScript语言程序可直接在IE、Netscape网络浏览器上运行而无需安装
软件,并且可直接插在SVG文档中或被SVG文档调用,因而人们常常通过编写JavaScript程序段实现复杂的、基于DOM的SVG交互应用。JavaScript程序在SVG中应用的主要步骤是:SVG文档的特定部位设置事件监听器,JavaScript通过初始化函数获取SVG的文档对象模型,由JavaScript的相应函数处理事件发生后的具体事项。2.1SVGDOM初始化
工作SVGDOM初始化工作可以按下面的方式由JavaScript函数处理:functioninit(evt){……varmyTarget=evt.getTarget();if(myTarget.getNodeType()!=9)//ifnotDOCUMENT_NODEsvgDoc=myTarget.getOwnerDocument();elsesvgDoc=myTarget;//其它语句省略}并在SVG文档中给出:<svgwidth="400"height="300"onl
oad="init(evt)">2.2事件监听器的设置和SVGDOM节点参数的改变事件监听器可设置在SVG文档中,如下面的例子,鼠标点击矩形的动作可传到名为change_attrib的JavaScript函数,并由此函数处理其余事项。<rectid="rect"onclick="change_attrib(evt)"x="50"y="100"width="60"height="50"/>假如需要使矩形的宽度尺寸为100,可给出下面两个语句:object=svgDoc.getElementById("rectangle");object.setAttribute("width","100");2.3鼠标事件鼠标触发事件是SVG交互编程里面常常使用,如上面介绍的onclick点击事件。鼠标移进、移出形体时可自动触发mouseover、mouseout事件,此类事件可用于改变线段的宽度、改变形体的颜色等方面,以产生提醒、强调的作用。下面的语句通过具体的JavaScript函数的处理,可使圆变大变小。<circlecx="150"cy="100"r="25"fill="red"onmouseover="enlarge(evt)"onmouseout="shrink(evt)"/>2.4键盘触发的事件下面的语句通过具体的JavaScript函数的处理,可将键盘输入的内容显示在SVG图形中。<gonkeypress="type(evt)"><rectx="0"y="0"width="400"height="400"/>//其它SVG语句省略</g>2.5JavaScript生成的高级事件交互应用的难点在于如何将JavaScript函数结合鼠标、键盘事件,生成复杂的SVG图形,这里给出一个简单的例子:运行下面的
HTML文档并点击圆,可由JavaScript函数根据渐开线方程自动生成一段渐开线。改变create函数for循环里的t的数值,可使生成的渐开线可长可短。经过简单的修改,可动态修改渐开线基圆半径。这里给出的是名为01.svg的SVG文档。<svgwidth="400"height="300"onload="init(evt)"><circleonclick="create()"cx="250"cy="200"r="50"fill="none"stroke="black"stroke-width="5"/