java调用javascript svg_基于JavaScript及JAVA的SVG交互应用

６９

科技资讯　ＳＣＩＥＮＣＥ　＆　ＴＥＣＨＮＯＬＯＧＹ　ＩＮＦＯＲＭＡＴＩＯＮ

Ｉ Ｔ　技　术

１．引言

由万维网联盟Ｗ３Ｃ［１］推出的ＸＭＬ、ＳＶＧ(Ｓｃａｌａｂｌｅ　Ｖｅｃ－ｔｏｒ　Ｇｒａｐｈｉｃｓ)［２］及ＤＯＭ(Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅｌ，文档对象模型规范)［３］是密切相关的技术。ＳＶＧ是ＸＭＬ格式的二维向量图形技术，在网络地图、网络二维动画中有着广泛的应用潜力；ＤＯＭ规范为处理存储在ＸＭＬ文档中的信息提供了一组标准编程接口，ＤＯＭ规范中的ＤＯＭ事件(ＤＯＭ　Ｅｖｅｎｔ)可用来编写ＳＶＧ交互应用程序；ＳＶＧ标准中与ＤＯＭ相关的专门说明为ＤＯＭ技术在ＳＶＧ中的应用奠定了基础。

作者所在的网络图形应用研究小组主要研究基于ＸＭＬ格式的ＳＶＧ、Ｘ３Ｄ应用方法，对ＳＶＧ动画进行过应用研究［７］。ＤＯＭ技术及其应用是研究的重点内容之一，是实现复杂ＳＶＧ交互应用的关键。论文介绍了应用ＪａｖａＳｃｒｉｐｔ及ＪＡＶＡ语言的ＳＶＧ交互应用方法，具体的实现也是基于ＳＶＧ的ＤＯＭ分析及处理。

２．基于ＪａｖａＳｃｒｉｐｔ语言的ＳＶＧ交互应用

人们可以在ＩＥ等网络浏览器上通过安装ＳＶＧ插件观看与Ｆｌａｓｈ动画类似的ＳＶＧ动画及互动内容。由于ＪａｖａＳｃｒｉｐｔ语言程序可直接在ＩＥ、Ｎｅｔｓｃａｐｅ网络浏览器上运行而无需安装软件，并且可直接插在ＳＶＧ文档中或被ＳＶＧ文档调用，因而人们常常通过编写ＪａｖａＳｃｒｉｐｔ程序段实现复杂的、基于ＤＯＭ的ＳＶＧ交互应用。ＪａｖａＳｃｒｉｐｔ程序在ＳＶＧ中应用的主要步骤是：ＳＶＧ文档的特定部位设置事件监听器，ＪａｖａＳｃｒｉｐｔ通过初始化函数获取ＳＶＧ的文档对象模型，由ＪａｖａＳｃｒｉｐｔ的相应函数处理事件发生后的具体事项。

２．１ＳＶＧ　ＤＯＭ初始化工作

ＳＶＧ　ＤＯＭ初始化工作可以按下面的方式由ＪａｖａＳｃｒｉｐｔ函数处理：

ｆｕｎｃｔｉｏｎ　ｉｎｉｔ(ｅｖｔ)　｛……

ｖａｒ　ｍｙＴａｒｇｅｔ　＝　ｅｖｔ．ｇｅｔＴａｒｇｅｔ()；

ｉｆ(　ｍｙＴａｒｇｅｔ．ｇｅｔＮｏｄｅＴｙｐｅ()　！＝　９　)　／／　ｉｆ　ｎｏｔＤＯＣＵＭＥＮＴ＿ＮＯＤＥ

ｓｖｇＤｏｃ　＝　ｍｙＴａｒｇｅｔ．ｇｅｔＯｗｎｅｒＤｏｃｕｍｅｎｔ()；ｅｌｓｅ

ｓｖｇＤｏｃ　＝　ｍｙＴａｒｇｅｔ；／／其它语句省略｝

并在ＳＶＧ文档中给出：

＜ｓｖｇ　ｗｉｄｔｈ＝＂４００＂　ｈｅｉｇｈｔ＝＂３００＂　ｏｎｌｏａｄ＝＂ｉｎｉｔ(ｅｖｔ)＂＞２．２事件监听器的设置和ＳＶＧ　ＤＯＭ节点参数的改变

基于ＪａｖａＳｃｒｉｐｔ及ＪＡＶＡ的ＳＶＧ交互应用

陈曦

(汕头大学工学院 ５１５０６３)

摘　要：分析了ＳＶＧ基于ＤＯＭ的互动应用原理。通过利用ＪａｖａＳｃｒｉｐｔ编程动态生成渐开线的例子，介绍了基于ＪａｖａＳｃｒｉｐｔ编程的ＳＶＧ互动应用方法；通过ＪＡＶＡ编程控制ＳＶＧ场景的变化，介绍了基于ＪＡＶＡ编程的ＳＶＧ互动应用方法。关键词：ＳＶＧ ＤＯＭ ＪａｖａＳｃｒｉｐｔ ＪＡＶＡ Ｂａｔｉｋ中图分类号：ＴＰ３９１ 文献标志码：Ａ

事件监听器可设置在ＳＶＧ文档中，如下面的例子，鼠标点击矩形的动作可传到名为ｃｈａｎｇｅ＿ａｔｔｒｉｂ的ＪａｖａＳｃｒｉｐｔ函数，并由此函数处理其余事项。

＜ｒｅｃｔ　ｉｄ＝＂ｒｅｃｔ＂　ｏｎｃｌｉｃｋ＝＂ｃｈａｎｇｅ＿ａｔｔｒｉｂ(ｅｖｔ)＂　ｘ＝＂５０＂ｙ＝＂１００＂　ｗｉｄｔｈ＝＂６０＂　ｈｅｉｇｈｔ＝＂５０＂／＞

假如需要使矩形的宽度尺寸为１００，可给出下面两个语句：ｏｂｊｅｃｔ＝ｓｖｇＤｏｃ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ(＂ｒｅｃｔａｎｇｌｅ＂)；ｏｂｊｅｃｔ．ｓｅｔＡｔｔｒｉｂｕｔｅ(＂ｗｉｄｔｈ＂，＂１００＂)；２．３鼠标事件

鼠标触发事件是ＳＶＧ交互编程里面常常使用，如上面介绍的ｏｎｃｌｉｃｋ点击事件。鼠标移进、移出形体时可自动触发ｍｏｕｓｅｏｖｅｒ、ｍｏｕｓｅｏｕｔ事件，此类事件可用于改变线段的宽度、改变形体的颜色等方面，以产生提醒、强调的作用。下面的语句通过具体的ＪａｖａＳｃｒｉｐｔ函数的处理，可使圆变大变小。

＜ｃｉｒｃｌｅ　ｃｘ＝＂１５０＂　ｃｙ＝＂１００＂　ｒ＝＂２５＂　ｆｉｌｌ＝＂ｒｅｄ＂ｏｎｍｏｕｓｅｏｖｅｒ＝＂ｅｎｌａｒｇｅ(ｅｖｔ)＂ｏｎｍｏｕｓｅｏｕｔ＝＂ｓｈｒｉｎｋ(ｅｖｔ)＂／＞２．４键盘触发的事件

下面的语句通过具体的ＪａｖａＳｃｒｉｐｔ函数的处理，可将键盘输入的内容显示在ＳＶＧ图形中。

＜ｇ　ｏｎｋｅｙｐｒｅｓｓ＝＂ｔｙｐｅ(ｅｖｔ)＂＞

＜ｒｅｃｔ　ｘ＝＂０＂　ｙ＝＂０＂　ｗｉｄｔｈ＝＂４００＂　ｈｅｉｇｈｔ＝＂４００＂／＞／／其它ＳＶＧ语句省略＜／ｇ＞

２．５ＪａｖａＳｃｒｉｐｔ生成的高级事件

交互应用的难点在于如何将ＪａｖａＳｃｒｉｐｔ函数结合鼠标、键盘事件，生成复杂的ＳＶＧ图形，这里给出一个简单的例子：运行下面的ＨＴＭＬ文档并点击圆，可由ＪａｖａＳｃｒｉｐｔ函数根据渐开线方程自动生成一段渐开线。改变ｃｒｅａｔｅ函数ｆｏｒ循环里的ｔ的数值，可使生成的渐开线可长可短。经过简单的修改，可动态修改渐开线基圆半径。

这里给出的是名为０１．ｓｖｇ的ＳＶＧ文档。

＜ｓｖｇ　ｗｉｄｔｈ＝＂４００＂　ｈｅｉｇｈｔ＝＂３００＂　ｏｎｌｏａｄ＝＂ｉｎｉｔ(ｅｖｔ)＂＞＜ｃｉｒｃｌｅ ｏｎｃｌｉｃｋ＝＂ｃｒｅａｔｅ()＂　ｃｘ＝＂２５０＂　ｃｙ＝＂２００＂　ｒ＝＂５０＂ｆｉｌｌ＝＂ｎｏｎｅ＂　ｓｔｒｏｋｅ＝＂ｂｌａｃｋ＂　ｓｔｒｏｋｅ－ｗｉｄｔｈ＝＂５＂　／＞

＜ｐａｔｈ　ｉｄ＝＂ｃｕｒｖｅ＂　ｆｉｌｌ＝＂ｎｏｎｅ＂　ｓｔｒｏｋｅ＝＂ｂｌａｃｋ＂　ｓｔｒｏｋｅ－ｗｉｄｔｈ＝＂２＂　／＞

＜／ｓｖｇ＞

这里给出的是ＨＴＭＬ文档。＜ＨＥＡＤ＞

＜ＥＭＢＥＤ　ｓｒｃ＝＂０１．ｓｖｇ＂ｗｉｄｔｈ＝４００　ｈｅｉｇｈｔ＝３００＞＜／Ｐ＞＜ＳＣＲＩＰＴ＞