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

吳素杰 張偉肖

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

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

一、SVG簡介

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

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

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

利用Flash的覆蓋最廣的優(yōu)勢，和極強(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對flash文檔中的圖片，文字，線等信息提取，生成XML樹（SVG符合XML標(biāo)準(zhǔn)），由PHP或其他動態(tài)網(wǎng)頁技術(shù)保存成SVG文件。

SVG中的信息的存貯格式：信息以XML的節(jié)點的形式存儲。以下以圖像，文字，線條為例介紹他們在SVG中的存儲方式。

（一）圖像在SVG中的存貯

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

舉例：

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

（二）文字在SVG中的存貯

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

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

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

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

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

舉例：

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

Hello，it is me！

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

（三）線在SVG中的存貯

直線

（x1，y1）為線的起點（，x2，y2）為線的終點

折線

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

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

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

var info_xml：XML = new XML（）;

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

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

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

…

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

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對象到Php頁面，由Php根據(jù)XML對象生成SVG文件

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

四、小結(jié)

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

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

參考文獻(xiàn)：

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

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