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类型进行加载。

<?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

http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html#WS6A72DBB6-E49E-465f-BAA8-462440405918