基于ＪＡＶＡ環(huán)境的ＳＶＧ圖形運(yùn)算器的設(shè)計與實現(xiàn)

摘要：可伸縮矢量圖形技術(shù)（Scalable Vector Graphics，SVG）是計算機(jī)多媒體技術(shù)研究的核心問題之一。設(shè)計和實現(xiàn)了一種基于JAVA環(huán)境的SVG圖形運(yùn)算器，利用SVG動態(tài)顯示特性，將運(yùn)算結(jié)果函數(shù)以矢量圖形形式輸出給終端用戶。分析了該運(yùn)算器的設(shè)計原理，給出了軟件具體的實現(xiàn)過程。說明了其可行性與有效性。

關(guān)鍵詞：JAVA；SVG；圖形運(yùn)算器；矢量圖形

中圖分類號：TP37文獻(xiàn)標(biāo)識碼：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之上，用以描述二維圖形及圖像程序的開發(fā)語言。它繼承了XML的特性，簡化了異質(zhì)系統(tǒng)間的信息交流。由于SVG可以融入XML和XHTML網(wǎng)頁中，因此它可以直接利用瀏覽器已有的技術(shù)，如CSS和DOM，達(dá)到圖形顯示的動態(tài)效果。目前，SVG已應(yīng)用于多種商業(yè)領(lǐng)域，包括網(wǎng)絡(luò)圖形，動畫，用戶界面，打印及輸出等等。其中應(yīng)用比較廣泛的是基于SVG的多比例尺空間數(shù)據(jù)GIS系統(tǒng)，當(dāng)比例尺達(dá)到一定程度時，GIS可以采用數(shù)據(jù)綜合或更換比例尺數(shù)據(jù)的辦法來保證屏幕空間數(shù)據(jù)的視覺效果，根據(jù)用戶的請求動態(tài)下載數(shù)據(jù)保存成SVG文檔傳給客戶端。當(dāng)系統(tǒng)中包含幾種比例尺數(shù)據(jù)時，GIS便可以提供不同尺度、不同層次上的空間信息服務(wù)。

本文介紹了一種基于JAVA環(huán)境的SVG圖形運(yùn)算器。它是利用SVG動態(tài)并以交互嵌入的形式顯示給終端用戶的功能，以圖像文件可讀與方便在網(wǎng)絡(luò)環(huán)境下提取為前提，設(shè)計了一種矢量顯示、并易于修改和編輯的圖形運(yùn)算器。

2 圖形運(yùn)算器系統(tǒng)結(jié)構(gòu)

本文介紹的圖形運(yùn)算器主要由兩層結(jié)構(gòu)組成：系統(tǒng)客戶層和系統(tǒng)邏輯層。

系統(tǒng)客戶層用來提供用戶與運(yùn)算器進(jìn)行數(shù)據(jù)交互的界面，包括一個輸入界面與一個圖形顯示界面。輸入界面用于接收用戶的參數(shù)輸入，從而確定不同類型的函數(shù)。經(jīng)過系統(tǒng)的數(shù)據(jù)處理，不同類型的函數(shù)曲線以SVG格式在圖形顯示界面呈現(xiàn)給用戶。

系統(tǒng)邏輯層根據(jù)從客戶層輸入界面提取的數(shù)據(jù)，向基于JAVA的系統(tǒng)數(shù)據(jù)分析環(huán)境提交參數(shù)，并在后臺繪制相應(yīng)的SVG圖形文件。這里生成的圖形顯示對象符合以下特性：矢量顯示對象，包括任意曲線；嵌入式外部圖像SVG；文字對象說明；可以實現(xiàn)動態(tài)和交互功能。

3 圖形運(yùn)算器設(shè)計與實現(xiàn)

3.1 用戶輸入界面

本文的例子是用來顯示格式為f(x ) = ax2 + bx + c 的函數(shù)圖像。用戶通過輸入a， b和c的值來決定自己希望顯示的函數(shù)。

3.2 SVG輸出格式

SVG文件是以

\"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\" >

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

3.3 定義SVG格式輸出組件及函數(shù)格式

本例中，我們調(diào)用Java的WriteStringToFile ()方法，用以將所顯示的函數(shù)以公式的形式顯示在輸出界面的左上方，同時得以確定函數(shù)所在坐標(biāo)軸的位置。

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

{

在窗口的左上方， 定義一段字符串用以顯示SVG圖像所示的函數(shù)表達(dá)式

bufferedwriter.write (\"\");

bufferedwriter.newLine ();

bufferedwriter.write(\"\");

通過參數(shù)a， b 和c的不同輸入判斷函數(shù)的多種形式

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函數(shù)的坐標(biāo)軸標(biāo)記位置

bufferedwriter.write(\" 0 \");

……

bufferedwriter.write(\" -Y \");}

3.4 分析提取的參數(shù)并繪制SVG圖形

當(dāng)用戶點擊OK按鈕后，下面所列的程序即被觸發(fā)。 用戶輸入的a， b和c參數(shù)被提取出來，并按照所需顯示圖形的格式配合Java語言寫入SVG文件中。

void exportButton_actionPerformed(ActionEvent e)

{

提取用戶在界面輸入的a， b， c參數(shù)值， 并傳入程序中以待分析計算.

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

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

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

在此， 我們僅以a 不等于0的情況舉例說明如何將所輸入的函數(shù)以SVG的圖像形式顯示出來. 其他各種函數(shù)的代碼編寫也以此類推.

if (a != 0)

{提取用戶輸入的參數(shù)并確定函數(shù)圖像的定點

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

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

double x;

double y;

x = x0;

y = y0;

try

{

下面的代碼將SVG文件格式動態(tài)保存于用以顯示圖像的SVG文件中. 因此包括了XML及SVG的文件頭和基本的顯示定義.

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

bufferedwriter.write(\"\");

bufferedwriter.write(\"

bufferedwriter.write(\"\\\"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd\\\">\");

bufferedwriter.write(\"

首先畫出函數(shù)所在的坐標(biāo)軸 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) );

通過循環(huán)的方式， 分別將函數(shù)中的各點的坐標(biāo)x和y求出， 并由SVG將各點圓滑的連接起來， 從而準(zhǔn)確的表示將函數(shù)的曲線圖像在網(wǎng)頁中.

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 圖形運(yùn)算器應(yīng)用實例顯示

通過本文第三部分的實現(xiàn)方法，我們可以利用SVG顯示各種函數(shù)的圖形?，F(xiàn)舉例如下：

圖3

5 結(jié)束語

本系統(tǒng)屬于JAVA環(huán)境下的一個SVG應(yīng)用。系統(tǒng)代碼在Win2000server等各類系統(tǒng)環(huán)境下均調(diào)試通過。另外只需編寫一個訪問接口，即可在不同平臺不同環(huán)境，訪問操作該圖形運(yùn)算器系統(tǒng)，因此該系統(tǒng)具有廣泛的適應(yīng)性和實用性。同時在未來的工作中，還可以考慮將該系統(tǒng)功能集成到Web 服務(wù)器中去，使其對網(wǎng)站信息化，例如統(tǒng)計數(shù)據(jù)邏輯分析顯示起到更大作用。

參考文獻(xiàn)：

[1] Scalable Vector Graphics (SVG) XML Graphics for the Web[EB/OL].http://www.w3.org/Graphics/SVG/.

[2] 徐云和.基于SVG的空間數(shù)據(jù)的可視化[J].計算機(jī)應(yīng)用研究，2005(2):46-47.

[3] 甘早斌.基于SVG的矢量圖形編輯系統(tǒng)的數(shù)據(jù)描述模型[J]].計算機(jī)工程與設(shè)計，2005(1):270-271.

[4] 胡衛(wèi)軍.一種面向領(lǐng)域應(yīng)用的SVG標(biāo)準(zhǔn)圖庫生成算法研究[J].計算機(jī)工程與科學(xué)，2007(4):51-52.

[5] 李清泉.基于SVG的空間信息描述與可視化表達(dá)[J].測繪學(xué)報，2005(1)：58-60.