Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

8 Sep
2008
Delicious

This Example and tag are pretty self-explanatory and can’t be explained much without looking at the code. All it does is you give it coordinates and it plots them. Example <Path data=”M 55 0 L 67 36 L 109 36 L 73 54 L 83 96 L 55 72 L 27 96 L 37 54 L 1 36 L 43 36 Z”> This draws a Star. M stands for Move To, L stands for Line to and Z stands for stop/Close line you can read more about it here.This is alot easier than having to use the lineTo and moveTo commands. It’s pretty concise. Here is the Code and Sample. As Usual Flash Player 10 to view it. First Data path draws a Star and Second Data path draws an arrow, more examples on the way. Here is Where you can Ask Questions if you have any. 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:adobe/flex/halo"
	xmlns="http://ns.adobe.com/mxml/2009"
	xmlns:ns="library:adobe/flex/gumbo" 
         xmlns:local="*" 
         backgroundImage="{null}" 
                backgroundColor="0xFFFFFF">
 
	<!-- M Stands for MOVE, L 
              Stands for Line To, Z = Close, Read more
	      here http://opensource.adobe.com/
               wiki/display/flexsdk/FXG+1.0+Specification -->
<Group>
    <Path data="M 55 0 L 67 36 L 109 36 L 73 54 
                        L 83 96 L 55 72 L 27 96 L 37 54 
                        L 1 36 L 43 36 Z">
        <fill>
            <SolidColor color="#FFCC00" />
        </fill>
        <stroke>
            <SolidColorStroke weight="3" color="#0340FF" />
        </stroke>
    </Path>
</Group>
 
 
<Group>
    <Path data="M 80 20 L 120 20 L 120 10 
                    L 140 30 L 120 50 L 120 40 L 80 40 Z">
        <fill>
            <SolidColor color="#FFCC00" />
        </fill>
        <stroke>
            <SolidColorStroke weight="3" color="#0340FF" />
        </stroke>
    </Path>
</Group>	
</mx:Application>
Incoming Search Terms :flex 4 path , path flex 4 , flex4 path , flex 4 draw arrow , flex 4 shape , flex draw arrow , flex 4 s:path , flex 4 path example , flex 4 paths , drawing shapes in flex
Incoming Search Terms :flex 4 path , path flex 4 , flex4 path , flex 4 draw arrow , flex 4 shape , flex draw arrow , flex 4 s:path , flex 4 path example , flex 4 paths , drawing shapes in flex

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


3 Responses to Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

Avatar

Fredericton Designers » Blog Archive » Using the Path Command in Flex 4 to Draw Shapes like Stars and Arrows

September 8th, 2008 at 9:16 am

[...] Link to the original site [...]

Avatar

avinashNo Gravatar

July 12th, 2010 at 2:02 am

i liked the above detail..simple and crisp…i”m trying to locate something which could move a point from(0,0) to (x,y) such that its a point in one state and animates and elongates from a point to a line to reach (x,y).. any suggestions..

Avatar

Marksion HuangNo Gravatar

November 2nd, 2011 at 10:36 pm

Good job!!

i have change it to a whiteboard, draw the path , Eclipse, Rectangle, and others , then save to a SVG file, it’s really usefull to read, or modify.

Comment Form