The focus of Degrafa beta 1 and 2 was to set up a solid core that would allow us to do really innovative things and make really complex things easy to do. We’re also chipping away at the need to have any external graphics referenced in your project. A new feature in Degrafa Beta 3 gets us even closer to meeting these goals.

This new feature is a new Fill type called VectorFill that is going to change the way you think about what’s possible visually in your applications. VectorFill allows you to compose any Degrafa geometry together and use it as a Fill for any other Degrafa geometry. As a simple example, imagine you wanted a background of diagonal lines. To achieve this with VectorFill all you need to do is draw one diagonal line using Degrafa, specify that Line as a source in a VectorFill, then apply that VectorFill to a Degrafa geometry object using the fill property.

Just like any other Degrafa object, you could edit that diagonal line, say change a color, and that change will dynamically get updated in the applied VectorFill. Also, when we say you can compose any Degrafa geometry together we mean shapes, transforms, fills, repeaters, strokes, and so on. You could move shapes with in VectorFill to create panning or use VectorFill with the Flex charting components to make really rich visuals. The possibilities are endless.

We’ve also added additional properties to VectorFill to allow for even more powerful ease of use. You get all the BitmapFill goodness of repeat, scale and angle etc. You also get the recently revealed fill transform features as well. And you also get filters, autosettings, background SolidFill and the ability to clip the fill source geometry based on a third geometry object (or even part of composition). Let’s take a look at some samples.

Below is an example of a VectorFill being used in a Circle. As you move your cursor over the eagle a zoomed view is shown. If you use your mouse wheel you can zoom in and out. This is not a mask, but a VectorFill with a clipSource setting (assigned to the magnifier’s lens) moving around and scaling in the Circle. To show a possible use, a second fill, a BitmapFill is used to take ’snapshots’.

Another example is using VectorFill to customize charting components. The example below uses a VectorFill to represent visually the sport for which the data pertains to. This opens a lot of doors for really custom-looking data visualization using existing charting components.

A more simple example is based on the scenario I outlined above; a diagonal line background. Most examples I’ve seen that use Degrafa always have one bitmap graphic in there for some kind of background. Well, now you can go completely vector. Below is a diagonal line background that uses a VectorFill and a Degrafa Line applied to a Rectangle. I’ve thrown in some other controls so you can see the live updates on the VectorFill.

We’re really excited about what will now be possible with this new VectorFill and some of the other new features we’ll be sharing soon.

New samples of Degrafa in use can be found at http://samples.degrafa.com. If you attended the Degrafa session at 360|Flex you may remember seeing them. They all address some of the new features in latest beta and include samples for:

• Skinning a VSlider to look like a thermometer
• Advanced skinning using Tweener, cursor position, color tweening, skin states, etc.
• Using the derive property
• Reusing compositions created in external MXML files
• Random art with Degrafa and Tweener
• Creating and using libraries

Visit the Degrafa Samples page and enjoy!

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.

A couple of the principle goals for Degrafa is reusability, and minimizing the code required to draw visuals. There are a lot of different ways to achieve this in Degrafa, but here’s one that’s particularly fun and interesting. In a former post we mentioned a Repeater as a means to reuse an object in a structured manner. Let’s take a look at the Repeater in closer detail.

The Repeater

Working with Degrafa, each geometry object can have a Repeater associated with it. The Repeater allows you to repeat the geometry using offsets you specify. These offsets are incremented progressively for the repeat count. It draws into the parent geometry objects graphics surface so the ensemble is considered one object.

Using a Repeater

Let’s start by specifying a stroke with an id of OrangeStroke.

Next, a simple line is defined with the Stroke bound to the above Stroke Object.

To repeat this Line object lets add a Repeater. After doing so, our Line object will look like this:

The above Line object will be drawn 11 times with the offsets we specified.

So now we have 11 vertical lines. We can easily turn this into a grid by defining another Line geometry object similar to the one above but on the horizontal axis.

Here is the second Line object that draws 11 lines on the horizontal axis.

A perfect reusable grid in just a few lines of MXML mark-up. No action script required, no math, no loops, no need to define any classes, and it’s readable to anyone.

More Samples

With the Repeater you can do some pretty interesting things. Here’s some quick examples made with Circles and Arcs:


Among other things that will be added to the Repeater are variations of objects that are repeated. For example, repeating lines that are different colors, heights, widths, random, etc.