Paths in FXG and MXML graphics

Paths define a filled graphic tag that draws a series of path segments. In vector graphics, a path is a series of points connected by straight or curved line segments. Together the lines form an image.

In FXG, you use a <Path> tag to define a vector shape constructed from a set of line segments. The MXML graphics equivalent of the FXG <Path> tag is the Path class. In MXML, you use the <s:Path> tag.

There are several different types of path segments you can use: line, cubic bezier, and quadratic bezier. Typically, the first tag of a path definition moves the pen to the starting position of the graphic. You then use the segments to draw the lines of the graphic.

To define a series of segments in a path, you use the path’s data property. You pass this property a series of instructions using shorthand syntax. Each value is preceded by a letter that acts as a segment identifier. The segment identifier indicates which type of segment to draw with the numeric values that follow it.

The following table describes the shorthand syntax used by the Path tag’s data property:

Segment Type

Segment Identifier

Parameters

Example

Close path

Z/z

n/a

Z

Closes off the path.

Cubic Bezier

C/c

c1X c1Y c2X c2Y x y

C 45 50 20 30 10 20

Curve to (10, 20), with the first control point at (45, 50) and the second control point at (20, 30).

Cubic Bezier (without control points)

S/s

c2X c2Y x y

S 20 30 10 20

Curve to (10, 20), with the second control point at (20, 30). The first control point is assumed to be the reflection of the second control point on the previous command relative to the current point.

Horizontal line

H/h

x

H 100

Horizontal line to 100.

Line

L/l

x y

L 50 30

Line to (50, 30).

Move

M/m

x y

M 10 20

Move pen position to (10, 20).

Quadratic Bezier

Q/q

cX cY x y

Q 110 45 90 30

Curve to (90, 30) with the control point at (110, 45).

Quadratic Bezier (without control points)

T/t

x y

T 90 30

Curve to (90, 30). The control point is the reflection of the control point on the previous command relative to the current point.

Vertical line

V/v

y

V 100

Vertical line to 100.

You can use an uppercase or lowercase letter for the segment identifiers. If you specify a segment identifier using the uppercase letter, then the positioning is absolute. If you specify a segment identifier using the lowercase letter, then the positioning is relative.

When using segments, you do not need to specify the starting position of the pen; the x and y coordinate of the starting point is defined by the current pen position.

After drawing a line segment, the current pen position becomes the x and y coordinates of the end point of the line. You can use the Move segment type to reposition the pen without drawing a line.

The Path syntax is nearly identical to the SVG path syntax. This makes it easy to convert SVG paths to FXG or MXML graphics. There is one exception: FXG and MXML graphics do not support an “A” or Arc segment. To create an arc (elliptical, parabolic, or otherwise), use the the cubic Bezier and quadratic Bezier control points to achieve any sort of arc.

Paths can contain effects such as transforms, filters, blend modes, and masks.

FXG examples

The following example uses the <Path> tag to draw a rectangle in FXG:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimplePathShorthandExample.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.*">

     <s:Panel title="Rectangle Example" height="75%" width="75%">
            <comps:SimplePathComp x="10" y="10"/>        
     </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following is the FXG component that is used by the previous example:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/SimplePathComp.fxg -->
<fx:Graphic xmlns:fx="http://ns.adobe.com/fxg/2008" version="2">    
    <!-- Use shorthand syntax to draw the rectangle. -->
    <fx:Path data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0">
         <!-- Define the border color of the rectangle. -->
         <fx:stroke>
              <fx:SolidColorStroke color="#888888"/>
         </fx:stroke>
    </fx:Path>
</fx:Graphic>
The following example draws two arrows in FXG, one in relative coordinates and one in absolute coordinates.
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ArrowExample.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="Arrow Graphic Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

          <s:HGroup>
              <!-- Use the ArrowAbsolute FXG component which uses absolute coordinates. -->
               <comps:ArrowAbsolute/>
               
              <!-- Use the ArrowRelative FXG component which uses relative coordinates. -->
               <comps:ArrowRelative/>               
          </s:HGroup>

     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following file defines an arrow graphic as an FXG graphic using absolute coordinates:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ArrowAbsolute.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <!-- Use Use compact syntax with absolute coordinates. -->
    <Path data="
         M 20 0 
         C 50 0 50 35 20 35
         L 15 35 
         L 15 45 
         L 0 32 
         L 15 19 
         L 15 29 
         L 20 29 
         C 44 29 44 6 20 6">
         <!-- Define the border color of the arrow. -->
         <stroke>
              <SolidColorStroke color="#888888"/>
         </stroke>
         <!-- Define the fill for the arrow. -->
         <fill>
              <LinearGradient rotation="90">
                   <GradientEntry color="#000000" alpha="0.8"/>
                   <GradientEntry color="#FFFFFF" alpha="0.8"/>
              </LinearGradient>
         </fill>
    </Path>
</Graphic>
The following file defines an arrow graphic as an FXG graphic using relative coordinates:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/comps/ArrowRelative.fxg -->
<Graphic xmlns="http://ns.adobe.com/fxg/2008" version="2">    
    <!-- Use compact syntax with relative coordinates. -->
    <Path data="   
              m 20 0 
              c 30 0 30 35 0 35 
              l -5 0
              l 0 10
              l -15 -13
              l 15 -13
              l 0 10
              l 5 0
              c 24 0 24 -23 0 -23">
         <!-- Define the border color of the arrow. -->
         <stroke>
              <SolidColorStroke color="#888888"/>
         </stroke>
         <!-- Define the fill for the arrow. -->
         <fill>
              <LinearGradient rotation="90">
                   <GradientEntry color="#000000" alpha="0.8"/>
                   <GradientEntry color="#FFFFFF" alpha="0.8"/>
              </LinearGradient>
         </fill>
    </Path>
</Graphic>

MXML graphics examples

The following MXML graphics example uses the <s:Path> tag to draw a rectangle:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/SimplePathShorthandExampleMXML.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">

     <s:Panel title="Rectangle MXML Graphics Example" height="75%" width="75%">
        <s:Path x="10" y="10" data="M 0 0 L 0 100 L 100 100 L 100 0 L 0 0">
             <!-- Define the border color of the rectangle. -->
             <s:stroke>
                  <s:SolidColorStroke color="0x888888"/>
             </s:stroke>
        </s:Path>
     </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
The following MXML graphics example defines two arrows, one with relative and the other with absolute positioning:
<?xml version="1.0" encoding="utf-8"?>
<!-- fxg/ArrowExampleMXML.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="Arrow MXML Graphics Example"
        height="75%" width="75%" layout="horizontal"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">

          <s:HGroup>
              <!-- Use absolute coordinates. -->
                <s:Graphic>    
                    <!-- Use Use compact syntax with absolute coordinates. -->
                    <s:Path data="
                         M 20 0 
                         C 50 0 50 35 20 35
                         L 15 35 
                         L 15 45 
                         L 0 32 
                         L 15 19 
                         L 15 29 
                         L 20 29 
                         C 44 29 44 6 20 6">
                         <!-- Define the border color of the arrow. -->
                         <s:stroke>
                              <s:SolidColorStroke color="0x888888"/>
                         </s:stroke>
                         <!-- Define the fill for the arrow. -->
                         <s:fill>
                              <s:LinearGradient rotation="90">
                                   <s:GradientEntry color="0x000000" alpha="0.8"/>
                                   <s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
                              </s:LinearGradient>
                         </s:fill>
                    </s:Path>
                </s:Graphic>

              <!-- Use relative coordinates. -->
                <s:Graphic>    
                    <!-- Use compact syntax with relative coordinates. -->
                    <s:Path data="   
                              m 20 0 
                              c 30 0 30 35 0 35 
                              l -5 0
                              l 0 10
                              l -15 -13
                              l 15 -13
                              l 0 10
                              l 5 0
                              c 24 0 24 -23 0 -23">
                         <!-- Define the border color of the arrow. -->
                         <s:stroke>
                              <s:SolidColorStroke color="0x888888"/>
                         </s:stroke>
                         <!-- Define the fill for the arrow. -->
                         <s:fill>
                              <s:LinearGradient rotation="90">
                                   <s:GradientEntry color="0x000000" alpha="0.8"/>
                                   <s:GradientEntry color="0xFFFFFF" alpha="0.8"/>
                              </s:LinearGradient>
                         </s:fill>
                    </s:Path>
                </s:Graphic>
          </s:HGroup>
     </mx:Panel>
</s:Application>
The executing SWF file for the previous example is shown below: