FXG初步

fxg的根标签是Graphic。一个FXG文档可包含零个或多个容器(如Group)和图形构件。 它的名字空间为:

http://ns.adobe.com/fxg/2008

当你创建了一个FXG文档，你必须指定Graphic的version属性。当前支持的版本的2.举例

Graphic xmlns="http://ns.adbode.com/fxg/2008" verstion="2"

 

例 使用FXG显示一矩形

GraphicComp.fxg在comps目录下

 

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

 

GraphicCompMain.mxml 在bin目录中

<?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/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:comps="comps.*">
    <comps:GraphicComp id="graphic1"/>

</s:Application>

 运行

 例 画一排星星

<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/OptimizedFXGExample.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"
xmlns:comps="comps.*"
width="500" height="300">
<s:Group>
<comps:star height="100" width="100" x="50" y="50"/>
<comps:star rotationX="20" height="70" width="70" x="150" y="50" alpha=".75"/>
<comps:star rotationX="40" height="50" width="50" x="220" y="50" alpha=".5"/>
<comps:star rotationX="60" height="30" width="30" x="270" y="50" alpha=".3"/>
<comps:star rotationX="80" height="10" width="10" x="300" y="50" alpha=".1"/>
</s:Group>

</s:Application>

<?xml version='1.0' encoding='UTF-8'?>
<!-- fxg/star.fxg -->
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">
    <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
        <fxg:fill>
            <fxg:SolidColor color="#FFFFFF"/>
        </fxg:fill>
        <fxg:stroke>
            <fxg:SolidColorStroke
            caps="none"
            color="#4769C4"
            joints="miter"
            miterLimit="4"
            weight="20"/>
        </fxg:stroke>
    </fxg:Path>

</fxg:Graphic>

运行 

 例 使用ActionScript创建一排星星

<?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"
width="500" height="300"
creationComplete="drawStar()">
<fx:Script>
<![CDATA[
import spark.core.SpriteVisualElement;
import comps.*;
private var myStar:SpriteVisualElement;
private function drawStar():void {
// Create new instances of star.fxg as if it were a local component.
for (var i:int = 0; i<4; i++) {
myStar = new star();
myStar.x = 50 + (i*75);
myStar.y = 50;
myStar.height = 100 - (i*30);
myStar.width = 100 - (i*30);
myStar.alpha = 1 - (i*.2);
myStar.rotationX = 20 + (i*20);
addElement(myStar);
}
}
]]>
</fx:Script>

</s:Application>

运行