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.

<Strokes>
    <mx:Stroke id="OrangeStroke" color="#EE9819" />
</Strokes>

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

<Geometry:Line Stroke="{OrangeStroke}"
    x="10" y="10" x1="0" y1="100"/>

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

<Geometry:Line Stroke="{OrangeStroke}"
    x="10" y="10" x1="0" y1="100">
    <Geometry:repeater>
        <Repeaters:LineRepeater count="11" moveOffsetX="10"
            moveOffsetY="0" offsetX="10" offsetY="0"/>
    </Geometry:repeater>
</Geometry:Line>

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.

<Geometry:Line Stroke="{OrangeStroke}" x="10" y="10"
    x1="100" y1="0">
    <Geometry:repeater>
        <Repeaters:LineRepeater count="11" moveOffsetX="0"
            moveOffsetY="10" offsetX="0" offsetY="10"/>
    </Geometry:repeater>
</Geometry:Line>

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.