Degrafa » svg

Ready, Set, Shape Stroke

jason — Wed, 04 Nov 2009 23:12:39 +0000

We will be introducing a couple more simple yet sophisticated decorations into Degrafa Beta 3.2 in order to show the multitude of ways this feature can be used. One of these is ShapeStrokeDecorator. This is a different type of decoration compared to the the SVGDashLine example in that in MXML it “wraps” the geometry you wish to decorate rather than being a nested tag. Consider the order of composition reversed between the two types.

ShapeStrokeDecorator achieves results similar to advanced path tools in a vector editor that allow placement of items along a path.

This decoration will be part of beta 3.2 due out this week. Here it is in action.

Randomly Generated Art

juan — Tue, 12 Feb 2008 04:11:42 +0000

The other day I came across Chad Udell’s post about his KulerCreator and it got me thinking. Degrafa could easily be used to create random generated art, especially since so many of the Degrafa object properties are bindable. I grabbed Tweener (which I had never used before) and applied it to a few different shapes and their properties.

I used two circles and set tweens on their size dimensions, as well as some of the gradient fill properties, which creates some interesting effects. There’s a polygon in there and I set tweens to each one of it’s four points. Finally, I threw a bird shape in there drawn with SVG path data. It took no time at all to put this together and the results are interesting. Most importantly, it was easy and was done using MXML markup.

Things could get really interesting with some physics, random colors, filters, easing, etc.

See the results

Degrafa Screencast: Using SVG Path Data

juan — Tue, 31 Jul 2007 08:34:01 +0000

Here’s a quick demo showing how you can use SVG path data to draw shapes in Flex via Degrafa. I know it’s a bit hard to see the code because of the video size, but you can at least get a general sense of what’s going on.

What I’m going through here is a pretty manual process that were going to try to eliminate with some import/export and visual tool sets. You can see a slightly larger video here.

How Complex Can You Get With Degrafa? Very.

juan — Fri, 27 Jul 2007 07:03:26 +0000

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:

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.