Flex中使用FXG
FXG是基于MXML(由FLEX框架使用的基于XML的编程语言)子集的图形文件格式。它类似于SVG,不过FXG主要针对Flash平台,更为切合Flash的渲染机制。因此在Flash Builder4中,推荐使用FXG来代替SVG。
如果你对SVG有所了解,就不难理解FXG的文件格式,下面是一个矩形的FXG文件示例。
<?xml version="1.0" encoding="utf-8"?> <!-- fxg/comps/GraphicComp.fxg --> <Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2"> <Rect id="rect1" width="200" height="200"> <fill> <SolidColor color="#FFFFCC"/> </fill> <stroke> <SolidColorStroke color="#660099" weight="2"/> </stroke> </Rect> </Graphic>
关于FXG的详细功能和设计说明,请参考:http://opensource.adobe.com/wiki/display/flexsdk/FXG+2.0+Specification。
那么如何在Flex中使用FXG呢?你可以利用Adobe Illustrator绘制图形,导出成FXG格式的文件;然后将FXG文件放入到一个包(如comps)中,引入这个包的命名空间后(xmlns:comps="comps.*"),你就可以将FXG文件作为Flex的一个组件使用,使用方法和自带的组件如Button,List等没有差别。
<?xml version="1.0" encoding="utf-8"?> <!-- FXG/GraphicCompMain.mxml --> <s:Application backgroundColor="0xFFFFFF" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:comps="comps.*" > <comps:GraphicComp id="graphic1"/> </s:Application>
如果需要动态加载,可将FXG文件作为SpriteVisualElement类型进行加载。
<?xml version="1.0" encoding="utf-8"?> <!-- fxg/OptimizedFXGActionScriptExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="drawStar()"> <fx:Script> <![CDATA[ import spark.core.SpriteVisualElement; private var myStar:SpriteVisualElement; private function drawStar():void { myStar = new star(); addElement(myStar); } ]]> </fx:Script> </s:Application>
详细内容请参考Adobe的官方文档:Using FXG