Friday, May 8, 2009

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

No comments:

Post a Comment