degrafa

As Degrafa evolves, Jason and I are trying to make sure we can account for a number of features someone may find important when creating graphics with the framework. Fills and Strokes are very important because they literally make up the shapes that get drawn.

Without a strong solution for those two things you’re left with a something somewhat lackluster. Here’s an example of where things are at so far with Fills and Strokes:

Fills

Fills are created outside and independent of any shape to make sure they can be repurposed. Each type of fill is declared in between a tag, so the MXML for all these fills together would look like this:

<Fills>
  <BitmapFill id="bitmapFill" imageSource="{TestImage}"
      repeat="true" rotation="45" smooth="true"/>
  <GradientFill id="gradientFill" angle="90">
      <GradientStop color="#ff0000" alpha=".8" ratio=".25"/>
      <GradientStop color="#ffffff" alpha=".5" ratio=".5"/>
      <GradientStop color="#999999" alpha=".8" ratio=".8"/>
  </GradientFill>
  <SolidFill id="solidFill" alpha="1" color="#a678cd"/>
</Fills>

Bitmap Fills

Let’s take a look at each Fill separately. The top-left circle is an example of using a Bitmap Fill and the Fill is created like this:

<BitmapFill id="bitmapFill" imageSource="{printerIcon}"
    repeat="true" rotation="45" smooth="true"/>

The imageSource variable name points to an embedded image, repeat allows you to specify if you’d like the image to repeat, rotation allows you to rotate the bitmap fill and smooth allows you to smooth out the bitmap fill. Smooth was helpful in this example where without it the edges of the repeated image were jagged.

Gradient Fills

Gradient fills allow you to create linear and radial gradient fills with multiple color, alpha, and ratio specifications. The top-middle circle is an example of a Gradient Fill. The MXML looks like this:

<GradientFill id="gradientFill" angle="90">
    <GradientStop color="#ff0000" alpha=".8" ratio=".25"/>
    <GradientStop color="#ffffff" alpha=".5" ratio=".5"/>
    <GradientStop color="#999999" alpha=".8" ratio=".8"/>
</GradientFill>

This creates a 3 color gradient fill with various ratios and alphas.

Solid Fills

Solid fills are pretty straight forward, it supports color and alpha. The MXML looks like this:

<SolidFill id="solidFill" alpha="1" color="#a678cd"/>

Working with Strokes

Just like Fills, Strokes are specified independent from any shape or object. Gradient Strokes, both linear and radial, and Solid Strokes are part of Degrafa. You can also specify things like joints, caps, spreadMethod, angle, miterLimit, scaleMode, pixelHinting and more. The MXML for a group of Strokes would look like this:

<Strokes>
  <SolidStroke color="#000000" alpha=".75"
      weight="6" id="solidStroke"/>
  <GradientStroke id="linearStroke" joints="round"
      gradientType="linear" weight="12" >
      <GradientStop color="#ff0000" alpha=".8" ratio=".25"/>
      <GradientStop color="#ffffff" alpha=".5" ratio=".5"/>
  </GradientStroke>
  <GradientStroke id="radialStroke" caps="square"
      joints="bevel" gradientType="radial" weight="12" >
      <GradientStop color="#ff0000" alpha=".8" ratio=".9"/>
      <GradientStop color="#ffffff" alpha=".5" ratio="1"/>
  </GradientStroke>
</Strokes>

As things progress, the ability to created different stroke styles like dashed, dotted, random, etc. will be added as well as the ability to add start/end caps like arrow heads, shapes, images, etc. Here’s an example of some strokes:

Gradient Strokes

As mentioned above, Radial and Linear Gradient strokes can be created using Degrafa. The code for the top-left example looks like this:

<GradientStroke id="linearStroke" joints="round"
      gradientType="linear" weight="12" >
      <GradientStop color="#ff0000" alpha=".8" ratio=".25"/>
      <GradientStop color="#ffffff" alpha=".5" ratio=".5"/>
 </GradientStroke>

The MXML for the radial stroke example to the top-right has square caps and bevel joints and looks like this:

<GradientStroke id="radialStroke" caps="square"
      joints="bevel" gradientType="radial" weight="12" >
      <GradientStop color="#ff0000" alpha=".8" ratio=".9"/>
      <GradientStop color="#ffffff" alpha=".5" ratio="1"/>
 </GradientStroke> 

Solid Strokes

Solid Strokes can have caps, joints, color, miterLimit, scaleMode, pixelHinting, etc. specified. The MXML:

<SolidStroke color="#000000" alpha=".75" weight="6"/>

Another thing worth mentioning is that we’re looking to allow the ability to specify Fills and Strokes properties through CSS, so there’s a way to maintain consistency throughout an app without code redundancy.