一个细致的立方贝泽尔曲线的例子

前几天，O'Reilly出版社发表了一本免费的在线书籍，是“What's New in Flash Player 11”，里面有一个关于立方贝泽尔曲线的小Demo，但是太过简单。那个Demo的源码是这样的：

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，终点）的随意控制，有助于更好的理解立方贝泽尔曲线的优势之处。