基于JAVA环境的SVG图形运算器的设计与实现

【摘要】(School of Computer Science and Technology, Nantong University, Nantong 226019, China) Abstract: Scalable Vector Graphics, SVG is one of key problems for computer multi...

摘要：可伸缩矢量图形技术（Scalable Vector Graphics，SVG）是计算机多媒体技术研究的核心问题之一。设计和实现了一种基于java环境的svg图形运算器，利用SVG动态显示特性，将运算结果函数以矢量图形形式输出给终端用户。分析了该运算器的设计原理，给出了软件具体的实现过程。说明了其可行性与有效性。

关键词：JAVA；SVG；图形运算器；矢量图形

中图分类号：TP37文献标识码：A文章编号：1009-3044(2008)35-2237-03

Design and Realization of SVG Graphical Calculator Based on JAVA

WU Jian

(School of Computer Science and Technology, Nantong University, Nantong 226019, China)

Abstract: Scalable Vector Graphics, SVG is one of key problems for computer multimedia technologies. The paper designs and realizes a graphical calculator base on JAVA. Using SVG dynamic characteristics, it transfers vector graphics of function result to terminal user. Then analyses the design principle, discusses how to achieve this software and demonstrates its feasibility and effectiveness.

Key words: JAVA; SVG; graphical calculator; vector graphics

1 引言

SVG（Scalable Vector Graphics）是一种基于纯文本格式XML之上，用以描述二维图形及图像程序的开发语言。它继承了XML的特性，简化了异质系统间的信息交流。由于SVG可以融入XML和XHTML网页中，因此它可以直接利用浏览器已有的技术，如CSS和DOM，达到图形显示的动态效果。目前，SVG已应用于多种商业领域，包括网络图形，动画，用户界面，打印及输出等等。其中应用比较广泛的是基于SVG的多比例尺空间数据GIS系统，当比例尺达到一定程度时，GIS可以采用数据综合或更换比例尺数据的办法来保证屏幕空间数据的视觉效果，根据用户的请求动态下载数据保存成SVG文档传给客户端。当系统中包含几种比例尺数据时，GIS便可以提供不同尺度、不同层次上的空间信息服务。

本文介绍了一种基于JAVA环境的SVG图形运算器。它是利用SVG动态并以交互嵌入的形式显示给终端用户的功能，以图像文件可读与方便在网络环境下提取为前提，设计了一种矢量显示、并易于修改和编辑的图形运算器。

2 图形运算器系统结构

本文介绍的图形运算器主要由两层结构组成：系统客户层和系统逻辑层。

系统客户层用来提供用户与运算器进行数据交互的界面，包括一个输入界面与一个图形显示界面。输入界面用于接收用户的参数输入，从而确定不同类型的函数。经过系统的数据处理，不同类型的函数曲线以SVG格式在图形显示界面呈现给用户。

系统逻辑层根据从客户层输入界面提取的数据，向基于JAVA的系统数据分析环境提交参数，并在后台绘制相应的SVG图形文件。这里生成的图形显示对象符合以下特性：矢量显示对象，包括任意曲线；嵌入式外部图像SVG；文字对象说明；可以实现动态和交互功能。

3 图形运算器设计与实现

3.1 用户输入界面

本文的例子是用来显示格式为f(x ) = ax2 + bx + c 的函数图像。用户通过输入a, b和c的值来决定自己希望显示的函数。

3.2 SVG输出格式

SVG文件是以元素开头的XML文档子树，因此一个完整的SVG文件同时也包括了XML的文件头格式定义。基本的SVG文件格式如下例所示。

"/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >

d="M80 80 L60 60…… L20 20"/>

3.3 定义SVG格式输出组件及函数格式

本例中，我们调用Java的WriteStringToFile ()方法，用以将所显示的函数以公式的形式显示在输出界面的左上方，同时得以确定函数所在坐标轴的位置。

Public static void WriteStringToFile (String aText, String bText, String cText, BufferedWriter bufferedwriter) throws IOException

{

在窗口的左上方, 定义一段字符串用以显示SVG图像所示的函数表达式

bufferedwriter.write ("");

bufferedwriter.newLine ();

bufferedwriter.write("");

通过参数a, b 和c的不同输入判断函数的多种形式

if (a==0 && b==0)

bufferedwriter.write("f(x)= "+cText);

else

if (a==0 && b!=0 && c>0)

bufferedwriter.write("f(x)= " +bText+"x"+"+ "+cText);

……

else

if (a!=0 && b>0 && c==0)

bufferedwriter.write("f(x)= " +aText+"x^2"+"+ "+bText+"x");

bufferedwriter.write ("");

通过图像中像素比例确定用以显示SVG函数的坐标轴标记位置

bufferedwriter.write (" 0 ");

……

bufferedwriter.write (" -Y ");}

3.4 分析提取的参数并绘制SVG图形

当用户点击OK按钮后，下面所列的程序即被触发。 用户输入的a, b和c参数被提取出来，并按照所需显示图形的格式配合Java语言写入SVG文件中。

void exportButton_actionPerformed(ActionEvent e)

{

提取用户在界面输入的a, b, c参数值, 并传入程序中以待分析计算.

this.a = Float.parseFloat(aField.getText());

this.b = Float.parseFloat(bField.getText());

this.c = Float.parseFloat(cField.getText());

在此, 我们仅以a 不等于0的情况举例说明如何将所输入的函数以SVG的图像形式显示出来. 其他各种函数的代码编写也以此类推.

if (a != 0)

{提取用户输入的参数并确定函数图像的定点

double x0 = -b / (2 * a);

double y0 = (4 * a * c - b * b) / (4 * a);

double x;

double y;

x = x0;

y = y0;

try

{

下面的代码将SVG文件格式动态保存于用以显示图像的SVG文件中. 因此包括了XML及SVG的文件头和基本的显示定义.

BufferedWriter bufferedwriter = new BufferedWriter(new FileWriter("Calculator.svg"));

bufferedwriter.write("");

bufferedwriter.write("

bufferedwriter.write("\"/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\">");

bufferedwriter.write("");

首先画出函数所在的坐标轴 X 轴、Y 轴和原点位置.

bufferedwriter.write("

bufferedwriter.write(" d=\"M 0 300 L 1000 300\"/>");

bufferedwriter.write("

bufferedwriter.write(" d=\"M 500 0 L 500 600\"/>");

bufferedwriter.write("

bufferedwriter.write(" d=\"M" + (x0*30+500) + " " + (300-y0*30) );

通过循环的方式, 分别将函数中的各点的坐标x和y求出, 并由SVG将各点圆滑的连接起来, 从而准确的表示将函数的曲线图像在网页中.

x = x0 + 0.1;

while (x < x0 + 1000) {y = a * x * x + b * x + c;

bufferedwriter.write(" L" + (x*30+500) + " " + (300-y*30) );

x = x + 0.1 ;}

bufferedwriter.write("\"/>");

bufferedwriter.write("

bufferedwriter.write("d=\"M" + (x0*30+500)+ " " + (300-y0*30) );

x = x0 - 0.1;

while (x > x0 - 1000) {y = a * x * x + b * x + c;

bufferedwriter.write(" L" + (x*30+500) + " " + (300-y*30) );

x = x - 0.1;}

bufferedwriter.write("\"/>");

bufferedwriter.write("");

bufferedwriter.flush();

bufferedwriter.close();

} catch (Exception ex)

4 图形运算器应用实例显示

通过本文第三部分的实现方法，我们可以利用SVG显示各种函数的图形。现举例如下：

图3

5 结束语

本系统属于JAVA环境下的一个SVG应用。系统代码在Win2000server等各类系统环境下均调试通过。另外只需编写一个访问接口，即可在不同平台不同环境,访问操作该图形运算器系统，因此该系统具有广泛的适应性和实用性。同时在未来的工作中，还可以考虑将该系统功能集成到Web 服务器中去，使其对网站信息化，例如统计数据逻辑分析显示起到更大作用。

参考文献：

[1] Scalable Vector Graphics (SVG) XML Graphics for the Web[EB/OL]./Graphics/SVG/.

[2] 徐云和.基于SVG的空间数据的可视化[J].计算机应用研究,2005(2):46-47.

[3] 甘早斌.基于SVG的矢量图形编辑系统的数据描述模型[J]].计算机工程与设计,2005(1):270-271.

[4] 胡卫军.一种面向领域应用的SVG标准图库生成算法研究[J].计算机工程与科学,2007(4):51-52.

[5] 李清泉.基于SVG的空间信息描述与可视化表达[J].测绘学报,2005(1)：58-60.