Flex中运用FXG
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类型进行加载。
详细内容请参考Adobe的官方文档:Using FXG http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html#WS6A72DBB6-E49E-465f-BAA8-462440405918 <?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>