Degrafa – Introduction to Splines Part VIII

Continuing from Part VII, the BezierSpline tag provides a means to set inputs to the Degrafa BezierSpline class.  All splines in Degrafa that are explicitly called splines are purely interpolative; that is they interpolate an arbitrary set of points.  It is okay to call a quadratic or cubic Bezier curve a spline.  These parametric curves interpolate the first and last points in a set.  Interior points influence the shape of the curve, but they are not interpolated.  Even so, quad and cubic Beziers are still essentially splines.

So, when we specifically call a Degrafa curve a ‘spline’, the reference will always be to a parametric curve that completely interpolates an arbitrary point set.  That point set is described in the ‘data’ attribute of the tag and drawn into a target that is bound to the Flex Canvas with the id of ‘theTarget.’

The <stroke> tag describes how to draw the Bezier spline as it is contained inside the BezierSpline tag.  In typical Degrafa fashion, we could add a <fill> tag after the <stroke> to specify a fill for the drawing.  Alternatively, we can create arbitrary sets of fills and bind them to a ‘fill’ attribute to create reusable fills.  For example,

<LinearGradientFill id="myFill">
  <GradientStop color="#666"/>
  <GradientStop color="#FFF"/>
</LinearGradientFill>

<BezierSpline id="mySpline" graphicsTarget="{[theTarget]}" verticalCenter="0"
  horizontalCenter="0"
  data="200,100 200,300 100,300 300,500 500,300 400,300 400,100"
  fill="{myFill}">

creates the following drawing,

Degrafa Cubic Bezier Spline with Fill

Notice that mathematically, the spline does what it is told; it interpolates the input points and Degrafa draws the spline with the specified stroke.  Degrafa also dutifully draws the fill based on the stroke outline and specified point set, but there is an implied closure to the fill that is not present in the spline outline.

The next post will discuss the topics of closure and spline tension.

Advertisement