请选择 进入手机版 | 继续访问电脑版

TQ官方网站

 找回密码
 立即注册
查看: 4141|回复: 0

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

[复制链接]

4

主题

4

帖子

49

积分

新手上路

Rank: 1

积分
49
发表于 2016-1-5 16:23:00 | 显示全部楼层 |阅读模式
《沐风课堂》腾讯课堂
本帖最后由 flashalliance 于 2016-1-5 16:24 编辑

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

  SVG这种格式的图形文件,近些年越来越多的被使用在互联网及各种应用程序中,然而,对于flash的使用者来说,我们发现flash虽然可以导出SVG格式的文件,却没有找到在flash中如何使用SVG格式的文件的方法,今天我们的福利就是讲解如何在flash中使用SVG格式的文件。
  其难点就是我们不知道如何将SVG格式的文件加载到flash当中,如果解决了这个问题,那么,对于SVG文件的操作,就和其他格式(jpggifpng)的图形操作是一样的,甚至更灵活(因为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文件:

svg1.jpg
  1. import flash.net.URLRequest;
  2. import com.lorentz.processing.ProcessExecutor;
  3. import com.lorentz.SVG.display.SVGDocument;

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

  6. var svg: SVGDocument = new SVGDocument();
  7. var url = new URLRequest("tqtqtq.svg");
  8. svg.load(url);
  9. addChild(svg);
复制代码


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

svg2.jpg
  1. import flash.net.URLRequest;
  2. import com.lorentz.processing.ProcessExecutor;
  3. import com.lorentz.SVG.display.SVGDocument;

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

  6. var svg:SVGDocument = new SVGDocument();
  7. var data='<svg><circle r="50" stroke="black" stroke-width="2" fill="red"/></svg>';
  8. svg.parse(data);
  9. addChild(svg);
复制代码


例C、动画SVG:

  1. import flash.net.URLRequest;
  2. import flash.utils.Timer;
  3. import flash.events.TimerEvent;
  4. import com.lorentz.processing.ProcessExecutor;
  5. import com.lorentz.SVG.display.SVGDocument;

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

  8. var svg: SVGDocument = new SVGDocument();
  9. var url = new URLRequest("tqtqtq.svg");
  10. svg.load(url);
  11. svg.x = 260;
  12. svg.y = 200;
  13. addChild(svg);

  14. var timer = new Timer(33, 0);
  15. timer.addEventListener("timer", fTimer);
  16. timer.start();
  17. function fTimer(event: TimerEvent): void {
  18.        svg.rotation += 10;
  19. }
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ:201205898 201205898|关于我们|友情链接|Archiver|手机版|小黑屋|RSS订阅|TQStudio ( 京ICP备12035064号 GitHub

GMT+8, 2018-4-22 08:47 , Processed in 0.102630 second(s), 26 queries .

Powered by Discuz! X3.2

© 2008-2028 tqtqtq.com

快速回复 返回顶部 返回列表