第四章 渲染技术Ⅱ[FL 基理译]

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

过控制点的曲线

现在，如果想让曲线真正地穿过控制点，那么这就是我们工具箱中的另一个工具。使用下面这个公式计算出控制点的实际位置，这样就可以让曲线穿过指定的点了。同样，以 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，现成的文件。

创建多条曲线

下面我们将目光转向创建多条曲线，而不仅是一条曲线，创建一条平滑的向各个方向弯曲的线。首先，来看一个错误的做法，是我原先尝试过的一种方法。从随便一个点位出发，经过第一个点到第二个点再到第三个点，经过第四个到达第五个，经过第六个到达第七个等等绘制一条曲线。这里是代码(文档类 MultiCurve1.as):

package {
　import flash.display.Sprite;
　public class MultiCurves1 extends Sprite {
　 private var numPoints:uint = 9;
　 public function MultiCurves1() {
　　 init();
　 }
　 private function init():void {
　　 // first set up an array of random points
　　 var points:Array = new Array();
　　 for (var i:int = 0; i < numPoints; i++) {
　　　 points[i] = new Object();
　　　 points[i].x = Math.random() * stage.stageHeight;
　　　 points[i].y = Math.random() * stage.stageHeight;
　　 }
　　 graphics.lineStyle(1);
　　 // now move to the first point
　　 graphics.moveTo(points[0].x, points[0].y);
　　 // and loop through each next successive pair
　　 for (i = 1; i < numPoints; i += 2) {
　　　 graphics.curveTo(points[i].x, points[i].y,

　　　 points[i + 1].x, points[i + 1].y);
　　 }
　 }
　}
}