package {
import flash.display.Sprite;
[SWF(width="600", height="500", backgroundColor="#CCCCCC")]
public class CubicBezierCurve extends Sprite {
private var drawingHolder:Sprite;
public function CubicBezierCurve() {
generateDisplayObjects();
}
protected function generateDisplayObjects():void {
drawingHolder = new Sprite();
drawingHolder.graphics.moveTo(20, stage.stageHeight-20);
drawingHolder.graphics.lineStyle(5,0x000000);
drawingHolder.graphics.cubicCurveTo(50, 50, stage.stageWidth-50, 50, stage.stageWidth-20, stage.stageHeight-20);
addChild(drawingHolder);
}
}
}
但是我感觉这个示例有点太简单了，另外也有在微博上问我，以前在Developer活动上，有另外一个Cubic Bezier的示例，比上面这个要好很多。那我就把我那个示例也贴在这里供参考。
package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.system.System;
[SWF(width="600", height="500", backgroundColor="#CCCCCC")]
public class Incubator_CubicBezierCurves extends Sprite
{
private var controlPoint1:Sprite;
private var controlPoint2:Sprite;
private var anchorPoint0:Sprite;
private var anchorPoint1:Sprite
public function Incubator_CubicBezierCurves()
{
super();
anchorPoint0 = addPoint(50,300);
anchorPoint1 = addPoint(500,300);
controlPoint1 = addPoint(125,100);
controlPoint2 = addPoint(400,100);
drawCubicCurve();
}
private function addPoint(x:Number,y:Number):Sprite{
var point:Sprite = new Sprite();
// 用很短长度的粗线绘制一个圆点
point.graphics.lineStyle(10,0xFF0000);
point.graphics.lineTo(1,0);
point.addEventListener(MouseEvent.MOUSE_DOWN, onControlDown);
point.addEventListener(MouseEvent.MOUSE_UP, onControlUp);
point.x = x;
point.y = y;
addChild(point);
return point;
}
private function onControlDown(event:MouseEvent):void{
(event.target as Sprite).startDrag();
stage.addEventListener(MouseEvent.MOUSE_MOVE, onControlMove);
}
private function onControlUp(event:MouseEvent):void{
(event.target as Sprite).stopDrag();
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onControlMove);
}
private function onControlMove(event:MouseEvent):void{
drawCubicCurve();
event.updateAfterEvent();
}
private function drawCubicCurve():void{
graphics.clear();
graphics.lineStyle(3, 0xFF);
trace(anchorPoint0.x);
trace(anchorPoint0.y);
graphics.moveTo(anchorPoint0.x, anchorPoint0.y);
graphics.cubicCurveTo(controlPoint1.x, controlPoint1.y, controlPoint2.x, controlPoint2.y,anchorPoint1.x,anchorPoint1.y);
graphics.lineStyle(1, 0, .5);
graphics.lineTo(controlPoint2.x, controlPoint2.y);
graphics.lineTo(controlPoint1.x, controlPoint1.y);
graphics.lineTo(anchorPoint0.x,anchorPoint0.y);
}
}
}
第二个示例提供了针对立方贝泽尔曲线在绘制时的四个点（起始点，拐点1，拐点2，终点）的随意控制，有助于更好的理解立方贝泽尔曲线的优势之处。