使用 curveTo 绘制曲线

下一个绘图函数，curveTo(x1, y1, x2, y2)，起点和 lineTo 一样，同样是以上一次画线的终点做为本次画线的起点，也可以使用 moveTo 命令指定画笔的起点，如果是第一次画线默认的起点为0,0。

可以看到， curveTo 函数中包括两个点。第一个是控制点影响曲线的形状，另一个是曲线的终点。这里使用的是名为二次方贝塞尔曲线的标准公式，该公式可以计算出两点间的曲线，这条曲线向着控制点弯曲。请注意，这条曲线不会与控制点接触，很像是曲线被它吸引过去的。

下面来看动作脚本，文档类 DrawingCurves.as：

package {
 import flash.display.Sprite;
 import flash.events.MouseEvent;
 public class DrawingCurves extends Sprite {
  private var x0:Number = 100;
  private var y0:Number = 200;
  private var x1:Number;
  private var y1:Number;
  private var x2:Number = 300;
  private var y2:Number = 200;
  public function DrawingCurves() {
   init();
  }
  private function init():void {
   stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  }
  private function onMouseMove(event:MouseEvent):void {
   x1 = mouseX;
   y1 = mouseY;
   graphics.clear();
   graphics.lineStyle(1);
   graphics.moveTo(x0, y0);
   graphics.curveTo(x1, y1, x2, y2);
  }
 }
}

测试这个文件，把鼠标来回移动。这里使用了两个给定的点作为起点和终点，使用鼠标位置作为控制点。请注意，曲线不会真正到达控制点位置，而只到达与控制点一半的位置。

过控制点的曲线

现在，如果想让曲线真正地穿过控制点，那么这就是我们工具箱中的另一个工具。使用下面这个公式计算出控制点的实际位置，这样就可以让曲线穿过指定的点了。同样，以 x0,y0 为起点，以 x2,y2 为终点，x1,y1为控制点，把将要穿过的点叫 xt,yt (目标点)。换言之，如果让曲线穿过 xt,yt点，那么 x1,y1 又需要如何使用呢？公式如下：

x1 = xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;

只需要把目标点乘以2，然后减去起点与终点的平均值。大家可以画张图来究竟一下它的原理，要么就直接学会使用它。

把公式放在代码中，鼠标坐标用使用 xt,yt，我们只需要改变前一个文档类中的两行，将下面两行：

x1 = mouseX;
y1 = mouseY;

替换为

x1 = mouseX * 2 - (x0 + x2) / 2;
y1 = mouseY * 2 - (y0 + y2) / 2;

或者直接看 CurveThroughPoint.as，现成的文件。

出处：蓝色理想
责任编辑：bluehearts

上一页 渲染技术 [4] 下一页 渲染技术 [6]

◎进入论坛RIA设计与应用版块参加讨论