Home > Degrafa, Flex > Degrafa Bezier X at Y Test Program

Degrafa Bezier X at Y Test Program

October 16, 2009

There is not much difference from the demo of the Bezier x-at-y method from the previously posted y-at-x demos.  Here is the MXML for the test case.  Most of the heavy lifting is in the displayXatY() method.  Study that and you should have a pretty good understanding of how the Bezier x-at-y method is applied.

If time allows, I’ll try to cook up a demo illustrating how to align sprites along the contour of a Bezier curve, but that will most likely wait until after I return from my upcoming business trip.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
xmlns:geom=”components.*”
xmlns=”http://www.degrafa.com/2007&#8243;
layout=”absolute”
width=”600″ height=”500″
pageTitle=”Degrafa Advanced Cubic Bezier X at Y”
applicationComplete=”test()” xmlns:degrafa=”http://www.degrafa.com/2007&#8243; viewSourceURL=”srcview/index.html”>

<mx:Style source=”assets/style/style.css”/>
<mx:Canvas id=”background” x=”50″ y=”90″ width=”500″ height=”320″ backgroundColor=”#FFFFFF” />
<mx:Label text=”Adv. Cubic Bezier X-at-Y” x=”250″ y=”30″ width=”300″ styleName=”title”/>

<mx:Canvas id=”bezierLayer” />
<mx:Canvas id=”boundsLayer” />

<geom:InteractivePoint id=”pointA” x=”90″ y=”250″ pointLabel=”A” radius=”5″ color=”0x00ff00″ width=”100″ height=”20″ />
<geom:InteractivePoint id=”pointB” x=”150″ y=”150″ pointLabel=”B” radius=”5″ color=”0x00ff00″ width=”100″ height=”20″ />
<geom:InteractivePoint id=”pointC” x=”290″ y=”200″ pointLabel=”C” radius=”5″ color=”0x00ff00″ width=”100″ height=”20″ />
<geom:InteractivePoint id=”pointD” x=”360″ y=”300″ pointLabel=”D” radius=”5″ color=”0x00ff00″ width=”100″ height=”20″ />

<AdvancedCubicBezier id=”bezier” graphicsTarget=”{[bezierLayer]}”>
<stroke>
<SolidStroke weight=”2″ color=”#0000FF”/>
</stroke>
</AdvancedCubicBezier>

<mx:Label x=”50″ y=”440″ text=”” width=”500″ fontSize=”12″ color=”#FFFFFF” id=”__x1__”/>
<mx:Label x=”50″ y=”460″ text=”” width=”500″ fontSize=”12″ color=”#FFFFFF” id=”__x2__”/>
<mx:Label x=”50″ y=”480″ text=”” width=”500″ fontSize=”12″ color=”#FFFFFF” id=”__x3__”/>

<mx:VSlider x=”500″ y=”95″ height=”310″ id=”__mySlider__” allowTrackClick=”false” minimum=”0″ maximum=”1″ enabled=”false” change=”displayXatY(event)” liveDragging=”true”/>

<mx:Script>
<![CDATA[
import mx.events.PropertyChangeEvent;
import mx.events.SliderEvent;

import com.degrafa.GraphicPointEX;
import com.degrafa.core.collections.GraphicPointCollection;

private var __yMin:Number;
private var __yMax:Number;

private function test():void
{
// restrict dragging for each point
var bounds:Rectangle = new Rectangle(background.x, background.y, background.width, background.height);
pointA.restrict      = bounds;
pointB.restrict      = bounds;
pointC.restrict      = bounds;
pointD.restrict      = bounds;

// actions when a property is changed on any InteractivePoint
pointA.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);
pointB.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);
pointC.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);
pointD.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE, onPropertyChanged);

// assign the quad. bezier data from script
assignBezierInterpolationPoints();

__mySlider__.alpha = 0.2;
__yMin             = __mySlider__.y;
__yMax             = __mySlider__.y + __mySlider__.height;
}

private function assignBezierInterpolationPoints():void
{
// property changes trigger redraw
var params:Array = bezier.interpolate( [new Point(pointA.x, pointA.y), new Point(pointB.x, pointB.y),
new Point(pointC.x, pointC.y), new Point(pointD.x, pointD.y)] );
}

private function onPropertyChanged(_e:PropertyChangeEvent):void
{
switch( _e.property )
{
case InteractivePoint.MOUSE_DOWN:
__mySlider__.enabled = false;
__mySlider__.alpha   = 0.2;
boundsLayer.graphics.clear();

addEventListener(Event.ENTER_FRAME, onPointMove);
break;

case InteractivePoint.MOUSE_UP:
removeEventListener(Event.ENTER_FRAME, onPointMove);

// enable slider
__mySlider__.enabled = true;
__mySlider__.alpha   = 1.0;
__mySlider__.value   = 0;
break;
}
}

// redraw control points and bezier curve when an InteractivePoint is moved
private function onPointMove(_e:Event):void
{
assignBezierInterpolationPoints();
}

// display X at Y
private function displayXatY(_e:SliderEvent):void
{
// line does not track the middle of the thumb, but the slider value
var myY:Number   = (1-_e.value)*__yMax + _e.value*__yMin – bezierLayer.y;
var values:Array = bezier.xAtY(myY);

__x1__.text = “”;
__x2__.text = “”;
__x3__.text = “”;

var g:Graphics = boundsLayer.graphics;
g.clear();
g.lineStyle(1,0xff0000);
g.moveTo( __mySlider__.x+10, myY + bezierLayer.y);
g.lineTo( background.x     , myY + bezierLayer.y);

if( values.length != 0 )
{
var o:Object   = values[0];
var myX:Number = o.x;
__x1__.text    = “t: ” + o.t + “, x: ” + myX;

g.beginFill(0xff0000);
g.drawCircle(myX, bezierLayer.y + myY, 4);

if( values.length > 1 )
{
o           = values[1];
myX         = o.x;
__x2__.text = “t: ” + o.t + “, x: ” + myX;

g.beginFill(0xff0000);
g.drawCircle(myX, bezierLayer.y + myY, 4);
}

if( values.length == 3 )
{
o           = values[2];
myX         = o.x;
__x3__.text = “t: ” + o.t + “, x: ” + myX;

g.beginFill(0xff0000);
g.drawCircle(myX, bezierLayer.y + myY, 4);
}
}
}

]]>
</mx:Script>

</mx:Application>

%d bloggers like this: