如何在Flash as3 中使用SVG格式的图形



　　SVG这种格式的图形文件，近些年越来越多的被使用在互联网及各种应用程序中，然而，对于flash的使用者来说，我们发现flash虽然可以导出SVG格式的文件，却没有找到在flash中如何使用SVG格式的文件的方法，今天我们的福利就是讲解如何在flash中使用SVG格式的文件。

　　其难点就是我们不知道如何将SVG格式的文件加载到flash当中，如果解决了这个问题，那么，对于SVG文件的操作，就和其他格式（jpg、gif、png）的图形操作是一样的，甚至更灵活（因为SVG文件是XML格式的文本，更容易被修改编辑。）。

　　如何导入SVG格式的文件呢？完全自己编写AS3脚本是一件艰难的工作，但是，我们很兴运的找到一个这方面的类库：AS3SVGRenderer。下面我们简单介绍一下AS3SVGRenderer的功能特点：（支持Flash10及以上版本）

1. 支持基本的形状和路径；

2. 支持文本（从右到左，上标下标。）；

3. Has 3文本渲染引擎（TextField，TLF，FTE），支持CFF和非CFF字体；

4. 支持坐标系统规则、转换和单位；

5. 支持遮罩和剪辑；

6. 支持填充、描边、渐变；

7. 支持标记符号；

8. 支持基本的文件结构（g,defs, symbol, use, image）；

9. 支持滤镜：颜色矩阵，高斯模糊；

10. 渲染显示SVG对象，通过as3的鼠标/触摸事件与SVG元素进行交互；

11. 支持as3；

12. 支持Flex组件；

 

不支持SVG的特性：

1. 文本描边；

2. 某些滤镜；

3. 编写脚本

4. 动画

 

使用方法：（直接上代码）

例A、加载外部SVG文件：

import flash.net.URLRequest;
import com.lorentz.processing.ProcessExecutor;
import com.lorentz.SVG.display.SVGDocument;

//初始化ProcessExecutor，在整个应用程序中只做一次。
ProcessExecutor.instance.initialize(stage);  

var svg: SVGDocument = new SVGDocument();
var url = new URLRequest("tqtqtq.svg");
svg.load(url);
addChild(svg);

例B、直接解析SVG字符串：

import flash.net.URLRequest;
import com.lorentz.processing.ProcessExecutor;
import com.lorentz.SVG.display.SVGDocument;

//初始化ProcessExecutor，在整个应用程序中只做一次。
ProcessExecutor.instance.initialize(stage);  

var svg:SVGDocument = new SVGDocument();  
var data='<svg><circle r="50" stroke="black" stroke-width="2" fill="red"/></svg>';
svg.parse(data);  
addChild(svg);

例C、动画SVG：

import flash.net.URLRequest;
import flash.utils.Timer;
import flash.events.TimerEvent;
import com.lorentz.processing.ProcessExecutor;
import com.lorentz.SVG.display.SVGDocument;

//初始化ProcessExecutor，在整个应用程序中只做一次。
ProcessExecutor.instance.initialize(stage);

var svg: SVGDocument = new SVGDocument();
var url = new URLRequest("tqtqtq.svg");
svg.load(url);
svg.x = 260;
svg.y = 200;
addChild(svg);

var timer = new Timer(33, 0);
timer.addEventListener("timer", fTimer);
timer.start();
function fTimer(event: TimerEvent): void {
	svg.rotation += 10;
}