In the last post we previewed the revamped Repeaters in Degrafa Beta 3. Another feature we’re excited about is transforms, which will include Scale, Skew, Translate, Rotate and Matrix. Transforms will allow you to further manipulate the graphics you create with Degrafa and with bindable properties Transforms can change graphics “on the fly” and bring things closer to cleanly converting SVG (and other formats) to Degrafa.

All this is similar to what you might expect from a graphics editing tool like Illustrator. What’s cool is in Degrafa the children inherit the parent transform but each can also have their own individual transform as well (without incurring the overhead and provides a more compact markup). Also, transforms are applied at render time and are none destructive (i.e. do not actually modify the geometry properties).

In most cases a single Transform may suit your needs for multiple transform types. If not, you can use a TransformGroup to create your own sequence in which the transforms will be applied, so you have complete flexibility. We also allow you to specify a registration point beyond top-left to include center, top-center, bottom-right, etc., as well as centerX and centerY providing additional control. This saves you from having to come up the math to set the registration point on your own.

Below is a basic example of a RegularRectangle with the following transforms applied to it from left to right: Scale, Skew, Rotate. (Matrix and Translate not shown).

Click to View and View Source

As you might expect Degrafa Transforms will work on any geometry drawn using Degrafa. However, there’s a bit more to it than that. You can also apply transforms to Fills (like a bitmap fill and any gradient fill) and Gradient-based Strokes. For example, below is a basic sample of a BitmapFill with a Scale, Skew and Rotate transform applied (images from COLOURlovers).

Click to View and View Source

Transforms allow you to manipulate geometry very easily rather than having to manually change properties or points. However, the real power comes from using Transforms with other features of Degrafa. Below are several examples of using a Repeater with different transforms. The one with the orange, white and grey “tick marks” actually has a transform applied to a Repeater with a transform on its children (mind-boggling, right?). This also shows that transforms are propagated to the children and that the parent can have a transform that also gets applied to the children, yet each child could add to their final transform with a transform of their own.

Click to View and View Source

When you start thinking about all the unique combinations of using transforms you can begin to see just how powerful they can be. As we preview more features of Degrafa Beta 3 you’ll be able to see how adding a single transform can drastically change graphics drawn with Degrafa to create very unique and interesting visuals.