Degrafa – Introduction to Splines Part VII

Continuing from Part VI, it’s time to have some fun.  Let’s draw a cubic Bezier spline using nothing but MXML.  As an old-school assembly language programmer, I find this a bit exciting.  All the complexity and detail from both a mathematical and programming standpoint are completly hidden.  What might traditionally be exposed to programmers through a documented API is now exposed to people who may have little traditional programming experience entirely through an XML-style syntax.

First of all, you need Degrafa Beta 3.  You also need a bit of experience with how to setup a Degrafa project and a minimal amount of Flex experience.  Fortunately, there are a great number of samples at multiple levels of complexity at the Degrafa learning page.

Let’s start with a simple outline of a curvy arrow, created by Jason Hawryluk.  Jason did the initial cubic Bezier spline port, starting from a standalone code base I created that was divorced from any dependency on non-essential classes in the Singularity package.  For not having a computational geometry background, he did an incredible job and deserves some serious props for getting this effort off the ground.

Create a new Flex project and try the following code,

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   xmlns="http://www.degrafa.com/2007" layout="absolute">
  
<BezierSpline id="mySpline" graphicsTarget="{[theTarget]}"
 verticalCenter="0" horizontalCenter="0" 
 data="200,100 200,300 100,300 300,500 500,300
400,300 400,100">
         <stroke>
            <SolidStroke weight="2" color="#000"/>
         </stroke> 
    </BezierSpline>
    <mx:Canvas id="theTarget" width="500" height="500"
borderColor="#CCCCCC" borderStyle="solid" />
</mx:Application>

If you run the application, your output should appear similar to the following.

Degrafa Cubic Bezier Spline

I ran the same data against the Singularity cubic Bezier spline which has additional capability to display the knots and control cages for the individual cubic Bezier curves comprising the spline.  These are illustrated below.

Illustration of knots and cubic Bezier control points

Notice how we were able to draw a relatively complex shape by specifying only a few knots through which the spline must pass.  The spline computations do all the work and the Degrafa framework exposes relevant properties to control the spline through MXML.

Well, that’s enough to get started.  In subsequent posts, we will deconstruct the basic code and make some modifications.

Advertisement