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”
xmlns:geom=”components.*”
xmlns=”http://www.degrafa.com/2007″
layout=”absolute”
width=”600″ height=”500″
pageTitle=”Degrafa Advanced Cubic Bezier X at Y”
applicationComplete=”test()” xmlns:degrafa=”http://www.degrafa.com/2007″ 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>
The Algorithmist 