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

吳素杰 張偉肖

摘 要： Flash Action Script結合SVG文件可以應用在一些線上設計領域。Flash的覆蓋廣，交互能力強、可以處理多種媒體，再結合SVG的通用性，可以創造出豐富的應用。本文在此方面進行了嘗試。

關鍵詞： Flash;ActionScript;SVG

一、SVG簡介

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

二、Flash Action Script與SVG結合的現實意義

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

利用Flash的覆蓋最廣的優勢，和極強的交互能力、多媒體處理能力，可以創造出豐富的應用。

生成的SVG文檔被大多數矢量處理軟件支持，所以有利于最終產品的標準化輸出。

這樣Flash與SVG結合，增強了Flash的開放性。必將帶來彼此新的更廣泛的應用。

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

SVG完全用普通文本來描述。是基于文本的圖像格式。我們可以利用Flash的Action Script對flash文檔中的圖片，文字，線等信息提取，生成XML樹（SVG符合XML標準），由PHP或其他動態網頁技術保存成SVG文件。

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

（一）圖像在SVG中的存貯

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

舉例：

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

（二）文字在SVG中的存貯

文字節點定義文本的屬性。

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

x，y表示文本的橫縱坐標。

dx，dy表示移動的橫縱坐標。

rotate表示旋轉的度數。

舉例：

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

Hello，it is me！

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

（三）線在SVG中的存貯

直線

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

折線

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

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

//創建一個新的空 XML 對象

var info_xml：XML = new XML（）;

//創建節點，并添加到XML樹

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

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

…

添加文本節點，并根據Flash中文本的屬性添加其對應的XML節點的屬性

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根據XML對象生成SVG文件

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

四、小結

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

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

參考文獻：

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

[2]張學勇，韓曉，李佳陽，孫云楓，等.基于可擴展架構的SVG圖形系統的設計與實現[J].江蘇電機工程，2016，35（06）：79-81+100.