利用Flash Action Script生成SVG文件的嘗試

吳素杰 張偉肖

摘 要： Flash Action Script結(jié)合SVG文件可以應(yīng)用在一些線上設(shè)計(jì)領(lǐng)域。Flash的覆蓋廣，交互能力強(qiáng)、可以處理多種媒體，再結(jié)合SVG的通用性，可以創(chuàng)造出豐富的應(yīng)用。本文在此方面進(jìn)行了嘗試。

關(guān)鍵詞： Flash;ActionScript;SVG

一、SVG簡(jiǎn)介

SVG（Scalable Vector Graphics，可升級(jí)矢量圖像）是W3C在2000年發(fā)布的一種開放的標(biāo)準(zhǔn)文本式矢量圖形描述語言。使用SVG可以在網(wǎng)頁(yè)上顯示出各種各樣的高質(zhì)量的矢量圖形，包括許多圖像處理中常見的功能，如圖形、文字、動(dòng)畫、顏色、濾鏡效果等。最關(guān)鍵的是SVG完全用普通文本來描述。并且SVG基于XML，所以可擴(kuò)展性很強(qiáng)。

二、Flash Action Script與SVG結(jié)合的現(xiàn)實(shí)意義

利用Flash Action Script生成SVG文件，可以使Flash和SVG相互補(bǔ)充，創(chuàng)造出一些新的應(yīng)用?？蓪?shí)現(xiàn)類似應(yīng)用的其他方法，如Java等，則往往需要用戶在客戶端額外安裝瀏覽器插件或程序，以及更改IE設(shè)置等。而這些修改和安裝對(duì)于用戶來說是往往一件煩惱的事。

利用Flash的覆蓋最廣的優(yōu)勢(shì)，和極強(qiáng)的交互能力、多媒體處理能力，可以創(chuàng)造出豐富的應(yīng)用。

生成的SVG文檔被大多數(shù)矢量處理軟件支持，所以有利于最終產(chǎn)品的標(biāo)準(zhǔn)化輸出。

這樣Flash與SVG結(jié)合，增強(qiáng)了Flash的開放性。必將帶來彼此新的更廣泛的應(yīng)用。

三、Flash Action Script與SVG結(jié)合的可行性和工作原理

SVG完全用普通文本來描述。是基于文本的圖像格式。我們可以利用Flash的Action Script對(duì)flash文檔中的圖片，文字，線等信息提取，生成XML樹（SVG符合XML標(biāo)準(zhǔn)），由PHP或其他動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)保存成SVG文件。

SVG中的信息的存貯格式：信息以XML的節(jié)點(diǎn)的形式存儲(chǔ)。以下以圖像，文字，線條為例介紹他們?cè)赟VG中的存儲(chǔ)方式。

（一）圖像在SVG中的存貯

圖像節(jié)點(diǎn)描述通過外部文件鏈接（相對(duì)路徑或絕對(duì)路徑）或通過 base64 編碼（這種情況下，可以讀取的格式有：BMP、JPEG、TIFF 或 PNG）定義的矢量圖像或位圖圖像，但不支持矢量圖像鏈接。

舉例：

這個(gè)圖像節(jié)點(diǎn)描述的是，寬為150，高為32，位于坐標(biāo)（155，150），該圖片的路徑為"images/png2.png"

（二）文字在SVG中的存貯

文字節(jié)點(diǎn)定義文本的屬性。

主要屬性有：x，y，dx，dy，rotate，textLength，lengthAdjust

x，y表示文本的橫縱坐標(biāo)。

dx，dy表示移動(dòng)的橫縱坐標(biāo)。

rotate表示旋轉(zhuǎn)的度數(shù)。

舉例：

font-family="Verdana" font-size="55" fill="blue" >

Hello，it is me！

該節(jié)點(diǎn)描述的是位于（250，150）的字體為“Verdana”字號(hào)為“55”顏色為“blue”的內(nèi)容為“Hello，it is me！”文本字段

（三）線在SVG中的存貯

直線

（x1，y1）為線的起點(diǎn)（，x2，y2）為線的終點(diǎn)

折線

（x0，y0）為線的起點(diǎn)，依次向（x1，y1）（x2，y2）…引折線

而在Flash中，可能會(huì)用到以下的ActionScript語句：

//創(chuàng)建一個(gè)新的空 XML 對(duì)象

var info_xml：XML = new XML（）;

//創(chuàng)建節(jié)點(diǎn)，并添加到XML樹

var svgNode = info_xml.createElement（"svg"）;

var gNode：XMLNode = info_xml.createElement（"g"）;

…

添加文本節(jié)點(diǎn)，并根據(jù)Flash中文本的屬性添加其對(duì)應(yīng)的XML節(jié)點(diǎn)的屬性

var textNode：XMLNode = info_xml.createElement（"text"）;

gNode.appendChild（textNode）;

textNode.attributes.x = mc.text_txt._x;

…

var myTextContentNode：XMLNode = info_xml.createTextNode（"textNode"）;

textNode.appendChild（myTextNode）;

…

//傳遞XML對(duì)象到Php頁(yè)面，由Php根據(jù)XML對(duì)象生成SVG文件

send_lv.sendAndLoad（"http：//localhost/test/svg/convertToxml.php"，result_lv，"POST"）。

四、小結(jié)

該方法可用于在線設(shè)計(jì)領(lǐng)域，例如在線繪畫，在線賀卡制作，在線個(gè)性物品平面設(shè)計(jì)等。

如何更深層的結(jié)合Flash Action Script與SVG，需要我們更多的探索與嘗試。

參考文獻(xiàn)：

[1]楊金政，邱崇濤，陳鵬.基于SVG格式進(jìn)行MapGIS圖形轉(zhuǎn)換[J].物探與化探，2018，42（05）：1069-1075.

[2]張學(xué)勇，韓曉，李佳陽(yáng)，孫云楓，等.基于可擴(kuò)展架構(gòu)的SVG圖形系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].江蘇電機(jī)工程，2016，35（06）：79-81+100.