Shapes in FXG and MXML graphics

FXG and MXML graphics define the following basic shapes:

  • Rectangles

  • Ellipses

  • Lines

The MXML graphics classes for the basic shapes are defined in the spark.primitives package.

The default border for any shape is to have a stroke with a line width of 0. Therefore, you must define a stroke when you draw a shape, otherwise the shape will be invisible when rendered. You can optionally fill the shape with a fill.

Rectangles

In FXG, the <Rect> tag draws a rectangular shape; in MXML graphics, use the <s:Rect> tag or the spark.primitives.Rect class. You define the height and width of a rectangle. You can also define the stroke, or border, of the rectangle, and a fill.

When drawing rectangles, you have a great deal of control over the curvature of the corners of the rectangle. The FXG <Rect> tag and the <s:Rect> MXML tag class include properties such as topLeftRadiusX, topLeftRadiusY, bottomRightRadiusX, and bottomRightRadiusY. Convenience properties, radiusX and radiusY, let you set the radii of all corners.

FXG examples

The following FXG example draws a simple rectangle with a 1 point black stroke:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleRectExample.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.*">

     <mx:Panel title="Rectangle Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:SimpleRectComp />
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the SimpleRectComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/SimpleRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
   <Rect height="100" width="200">                              
         <stroke>
              <SolidColorStroke color="#000000" weight="1"/>
         </stroke>
   </Rect>
</Graphic>
The following FXG-based example draws two rectangles with strokes and fills. One rectangle has rounded corners:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RectExample.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.*">
     
     <mx:Panel title="Rectangle Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:VGroup>
            <comps:FilledRectComp/>
            <comps:RoundRectComp/>    
        </s:VGroup>
     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the FilledRectComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FilledRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <!-- Draw rectangle with square corners. -->
   <Rect height="100" width="200">                              
         <stroke>
              <SolidColorStroke color="#000000" weight="2"/>
         </stroke>
         <fill>
              <RadialGradient>
                        <GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
                        <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
                        <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
              </RadialGradient>
         </fill>
   </Rect>
</Graphic>
The following file defines the RoundRectComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/RoundRectComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <!-- Draw rectangle with rounded corners. -->
    <Rect height="100" width="200" radiusX="25" radiusY="25">                              
         <stroke>
              <SolidColorStroke color="#000000" weight="2"/>
         </stroke>
         <fill>
              <RadialGradient>
                        <GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
                        <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
                        <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
              </RadialGradient>
         </fill>
    </Rect>
</Graphic>

MXML graphics examples

The following MXML graphics example draws a simple rectangle with a 1 point black stroke:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleRectExampleMXML.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">

     <mx:Panel title="Rectangle MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
           <s:Rect height="100" width="200">                              
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="1"/>
                 </s:stroke>
           </s:Rect>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following MXML graphics example draws two rectangles with strokes and fills. One rectangle has rounded corners:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/RectExampleMXML.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">
     
     <mx:Panel title="Rectangle MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:VGroup>
           <s:Rect height="100" width="200">                              
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="2"/>
                 </s:stroke>
                 <s:fill>
                      <s:RadialGradient>
                                <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
                                <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
                                <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
                      </s:RadialGradient>
                 </s:fill>
           </s:Rect>
            <s:Rect height="100" width="200" radiusX="25" radiusY="25">                              
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="2"/>
                 </s:stroke>
                 <s:fill>
                      <s:RadialGradient>
                                <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
                                <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
                                <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
                      </s:RadialGradient>
                 </s:fill>
            </s:Rect>
        </s:VGroup>
     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

For more information, see the Rect class in the ActionScript 3.0 Reference for the Adobe Flash Platform.

Ellipses

In FXG, use the <Ellipse> tag to draw circles and ellipses; in MXML graphics, use the <s:Ellipse> tag or the spark.primitives.Ellipse class.

To define the dimensions of the ellipse, use the height and width attributes. These attributes are relative to the graphic’s upper left corner. If you set the height and width attributes to the same value, the ellipse is a circle.

FXG examples

The following FXG-based example draws a simple circle:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleEllipseExample.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.*">

     <mx:Panel title="Ellipse Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:CircleComp />
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the CircleComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/CircleComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <Ellipse height="200" width="200">
          <stroke>
               <SolidColorStroke color="#000000" weight="1"/>
          </stroke>
    </Ellipse>
</Graphic>
The following FXG-based example draws an ellipse with a fill:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/EllipseExample.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.*">
    
     <mx:Panel title="Ellipse Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:FilledCircleComp/>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the FilledCircleComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/FilledCircleComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <Ellipse height="100" width="250">
          <stroke>
               <SolidColorStroke color="#000000" weight="2"/>
          </stroke>
        <fill>
           <RadialGradient>
             <GradientEntry color="#0056FF" ratio="0" alpha=".5"/>
             <GradientEntry color="#00CC99" ratio=".33" alpha=".5"/>
             <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/>
         </RadialGradient>
        </fill>
    </Ellipse>
</Graphic>

MXML graphics examples

The following MXML graphics example draws a simple circle:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleEllipseExampleMXML.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">

     <mx:Panel title="Ellipse MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <s:Ellipse height="200" width="200">
                  <s:stroke>
                       <s:SolidColorStroke color="0x000000" weight="1"/>
                  </s:stroke>
            </s:Ellipse>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following MXML graphics example draws an ellipse with a fill:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/EllipseExampleMXML.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.*">
    
     <mx:Panel title="Ellipse MXML Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <s:Ellipse height="100" width="250">
                  <s:stroke>
                       <s:SolidColorStroke color="0x000000" weight="2"/>
                  </s:stroke>
                <s:fill>
                   <s:RadialGradient>
                     <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/>
                     <s:GradientEntry color="0x00CC99" ratio=".33" alpha=".5"/>
                     <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/>
                 </s:RadialGradient>
                </s:fill>
            </s:Ellipse>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

For more information, see the Ellipse class in the ActionScript 3.0 Reference for the Adobe Flash Platform.

Lines

To draw a line from one point to another in FXG, use the <Line> tag; in MXML graphics, use the <s:Line> tag or the spark.primitives.Line class.

The default width of a line is 0; you must define a stroke so that the line is visible. Strokes can be one of the following:

  • SolidColorStroke

  • LinearGradientStroke

  • RadialGradientStroke

You can optionally define the color, joint types, and other properties of the line.

FXG examples

The following FXG-based example draws a simple 1 point black line with the SolidColorStroke child:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleLineExample.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.*">

     <mx:Panel title="Line Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:LineComp/>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the LineComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/LineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
   <Line xFrom="0" xTo="100" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="1"/>
         </stroke>
   </Line>
</Graphic>
The following FXG-based example draws a series of lines with varying widths:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LineExample.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.*">

     <mx:Panel title="Line Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:MultipleLineComp x="20" y="20"/>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the MultipleLineComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/MultipleLineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <Line xFrom="0" xTo="0" yFrom="0" yTo="100">
         <!-- Define the border color of the line. -->
         <stroke>
              <SolidColorStroke color="#000000" weight="1" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="6" xTo="6" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="1" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="12" xTo="12" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="2" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="20" xTo="20" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="3" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="30" xTo="30" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="5" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="43" xTo="43" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="8" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="58" xTo="58" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="13" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="84" xTo="84" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="21" caps="square"/>
         </stroke>
    </Line>
    <Line xFrom="123" xTo="123" yFrom="0" yTo="100">
         <stroke>
              <SolidColorStroke color="#000000" weight="34" caps="square"/>
         </stroke>
    </Line>
</Graphic>
To use a LinearGradientStroke or RadialGradientStroke in FXG, you add one or more <GradientEntry> elements as children. These gradients are used to define the fill of the stroke. The following example defines a line whose color shifts from blue to yellow:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientLineExample.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.*">

     <mx:Panel title="Linear Gradient Line Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
            <comps:LinearGradientLineComp x="20" y="20"/>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines the LinearGradientLineComp FXG component used in the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/LinearGradientLineComp.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <Line xFrom="0" xTo="200" yFrom="0" yTo="0">
         <stroke>
              <LinearGradientStroke weight="20" caps="square">
                    <GradientEntry color="#0056FF" ratio="0" alpha=".5"/> 
                    <GradientEntry color="#ECEC21" ratio=".66" alpha=".5"/> 
              </LinearGradientStroke>                         
         </stroke>
    </Line>
</Graphic>

MXML graphics examples

The following MXML graphics example draws a simple 1 point black line with the SolidColorStroke child:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimpleLineExampleMXML.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">

     <mx:Panel title="Line MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group>
           <s:Line xFrom="0" xTo="100" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="1"/>
                 </s:stroke>
           </s:Line>
        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following MXML graphics example draws a series of lines with varying widths:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LineExampleMXML.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.*">

     <mx:Panel title="Line MXML Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="30" paddingBottom="10" paddingLeft="10" paddingRight="10">

        <s:Group x="20" y="20">
            <s:Line xFrom="0" xTo="0" yFrom="0" yTo="100">
                 <!-- Define the border color of the line. -->
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="6" xTo="6" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="1" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="12" xTo="12" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="2" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="20" xTo="20" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="3" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="30" xTo="30" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="5" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="43" xTo="43" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="8" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="58" xTo="58" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="13" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="84" xTo="84" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="21" caps="square"/>
                 </s:stroke>
            </s:Line>
            <s:Line xFrom="123" xTo="123" yFrom="0" yTo="100">
                 <s:stroke>
                      <s:SolidColorStroke color="0x000000" weight="34" caps="square"/>
                 </s:stroke>
            </s:Line>

        </s:Group>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
To use a LinearGradientStroke or RadialGradientStroke in MXML graphics, you add one or more <s:GradientEntry> tags as children. These gradients are used to define the fill of the stroke. The following MXML graphics example defines a line whose color shifts from blue to yellow:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/LinearGradientLineExampleMXML.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.*">

     <mx:Panel title="Linear Gradient Line MXML Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">        
            <s:Group x="20" y="20">    
                <s:Line xFrom="0" xTo="200" yFrom="0" yTo="0">
                     <s:stroke>
                          <s:LinearGradientStroke weight="20" caps="square">
                                <s:GradientEntry color="0x0056FF" ratio="0" alpha=".5"/> 
                                <s:GradientEntry color="0xECEC21" ratio=".66" alpha=".5"/> 
                          </s:LinearGradientStroke>                         
                     </s:stroke>
                </s:Line>
            </s:Group>        
     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:

For more information, see the Line class in the ActionScript 3.0 Reference for the Adobe Flash Platform.