So far, some of the examples of the drawing capabilities of Degrafa have been relatively simple in order to stress key concepts and features. We think it’s important that users of the framework are in no way limited in what they can create and as we progress with Degrafa we will try to put together complex examples of the capabilities when ever possible.

In this case we’ve taken an SVG from here and ported it over to Degrafa in under 1900 lines of MXML (minus some line breaks). Also, we added the ability to change the color of the tiger’s eyes just as a quick example of affecting the graphic dynamically. Here’s the sample:

Click here to open this example in a larger window.

Drawing with SVG Path Data

This tiger is drawn using shorthand path data that maps directly to SVG path data in that they are the same. However, you are not limited to that drawing method. The SVG path data for this example was copied and pasted into the Degrafa markup. Here’s an example of how one whisker is drawn, including Fills and Strokes:

<Geometry:Path
data="M-118.774 81.262C-118.774 81.262 -119.323 83.078
-120.092 82.779C-120.86 82.481 -119.977 31.675 -140.043
26.801C-140.043 26.801 -120.82 25.937 -118.774 81.262z">
	<Geometry:Fill>
		<SolidFill color="#ffffff"/>
	</Geometry:Fill>
	<Geometry:Stroke>
		<SolidStroke alpha=".25" color="#000000"/>
	</Geometry:Stroke>
</Geometry:Path>

<Geometry:Path
data="M-91.284 123.59C-91.284 123.59 -89.648 124.55
-90.118 125.227C-90.589 125.904 -139.763 113.102
-149.218 131.459C-149.218 131.459 -145.539 112.572
-91.284 123.59z">
	<Geometry:Fill>
		<SolidFill color="#ffffff"/>
	</Geometry:Fill>
	<Geometry:Stroke>
		<SolidStroke alpha=".25" color="#000000"/>
	</Geometry:Stroke>
</Geometry:Path> 

Each shape is drawn as a Path and uses short hand markup for moveTo, cubicBezierTo and positioning. With this method you can create objects similar to the way SVGs are drawn and you can get very detailed. Once the objects are drawn, you are free to manipulate them as you see fit.

In the short term we’d like to integrate the ability for someone to create artwork in Illustrator, export it as an SVG, and then bring it right into Flex via Degrafa to leverage the benefits of having a dynamic graphic versus a static one.