利用Flash Action Script生成SVG文件的尝试

来源: 发布时间:2019-07-24 09:01:30

  摘要

  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中的存储方式。

  1、 图像在SVG中的存贮:

  图像节点描述通过外部文件链接(相对路径或绝对路径)或通过 base64 编码(这种情况下,可以读取的格式有:BMP、JPEG、TIFF 或 PNG)定义的矢量图像或位图图像,但不支持矢量图像链接。

  举例:

  

  这个图像节点描述的是,宽为150,高为32,位于坐标(15.5,150),该图片的路径为"images/png2.png"

  2、 文字在SVG中的存贮:

  文字节点定义文本的属性。

  主要属性有:x,y,dx,dy,rotate,textLength,lengthAdjust

  x,y表示文本的横纵坐标。

  dx,dy表示移动的横纵坐标。

  rotate表示旋转的度数。

  举例:

  <text y="150" x="250" p="" <="">

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

  Hello, it is me!

  

  该节点描述的是位于(250,150)的字体为“Verdana”字号为“55”颜色为“blue”的内容为“Hello, it is me!”文本字段

  3、 线在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.

京ICP备19010415号  版权所有:科技风杂志社官网  未经本刊授权不得转载本站文章