FXG Tutorial : Understanding Paths

Continuing on the FXG Tutorials, in this tutorial, we will be seen Paths in FXG. Paths represent the outline of a shape in FXG. Paths are created using the Path element and the co-ordinates are given in its data attribute. A Path element supports fills,strokes,filters and blendmodes.

Path data contains numbers and specific letters which specify instructions (M indicates a moveto command, the L indicate lineto command, and the z indicates a closepath command).

Here is the example:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
 xmlns="library://ns.adobe.com/flex/spark">

    <fx:Library>

        <fx:Definition name="Triangle">
            <Group>
                <Path data="M 100 100 L 50 200 L 150 200 z">
                    <fill>
                        <SolidColor color="#FF0000" />
                    </fill>
                    <stroke>
                        <SolidColorStroke weight="3" color="#0000FF" />
                    </stroke>
                </Path>
            </Group>
        </fx:Definition>

        <fx:Definition name="Square">
            <Group>
                <Path data="M 100 100 L 200 100 L 200 200 L 100 200 z">
                    <fill>
                        <SolidColor color="#FF0000" />
                    </fill>
                    <stroke>
                        <SolidColorStroke weight="3" color="#0000FF" />
                    </stroke>
                </Path>
            </Group>
        </fx:Definition>

    </fx:Library>

    <Group>
        <layout> <HorizontalLayout/> </layout>
        <fx:Triangle/>
        <fx:Square/>
    </Group>

</Application>

As you can see, in the Path data of the Triangle,we have . This merely says : First, Move to 100,100. Then draw a Line to 50,200. Then draw a Line to 150,200. Then close the Path. We can use this to draw any shape that we want easily. You can read more here. Happy experimenting :D. Feel free to drop a comment about anything. Happy experimenting :D