给出一些点比如:
[100,0], [110,120],[150,150],[90,220];
通过这些点画一条曲线。
分两种情况:1、这些点作为控制点画曲线。2、画出的曲线需要经过这几个点
这是两种不同的理解,因为curveTo绘制曲线:
curveTo(x1, y1, x2, y2),起点和lineTo 一样,同样是以上一次画线的终点做为本次画线的起点,也可以使用moveTo 命令指定画笔的起点,如果是第一次画线默认的起点为0,0。
可以看到, curveTo 函数中包括两个点。第一个是控制点影响曲线的形状,另一个是曲线的终点。这里使用的是名为二次方贝塞尔曲线的标准公式,该公式可以计算出两点间的曲线,这条曲线向着控制点弯曲。请注意,这条曲线不会与控制点接触,很像是曲线被它吸引过去的。(控制点是不在曲线上的)
通过例子说明两种情况:
第一种情况:(把这些点作为曲线的控制点)
var points:Array = new Array();
points[0] = new Object();
points[1] = new Object();
points[2] = new Object();
points[3] = new Object();
points[0].x=100,points[0].y=0;
points[1].x=110,points[1].y=120;
points[2].x=150,points[2].y=150;
points[3].x=90,points[3].y=220;
graphics.lineStyle(1);0000000000000
graphics.moveTo(points[0].x, points[0].y);
for (var i:int = 0; i < points.length-1; i ++) {
var xc:Number = (points[i].x + points[i + 1].x) / 2;
var yc:Number = (points[i].y + points[i + 1].y) / 2;
graphics.curveTo(points[i].x, points[i].y, xc, yc);
}
第二种情况:(这些点都在曲线上)
var points:Array = new Array();
points[0] = new Object();
points[1] = new Object();
points[2] = new Object();
points[3] = new Object();
points[0].x=100,points[0].y=0;
points[1].x=110,points[1].y=120;
points[2].x=150,points[2].y=150;
points[3].x=90,points[3].y=220;
graphics.lineStyle(1);
graphics.moveTo(points[0].x, points[0].y);
for (var i:int = 1; i < points.length-1; i ++) {
var xc:Number = (points[i].x*2-(points[i-1].x+points[i+1].x)/2);
var yc:Number = (points[i].y*2-(points[i-1].y+points[i+1].y)/2);
graphics.curveTo( xc, yc,points[i+1].x,points[i+1].y);
}
注意红色部分的代码公式:
x1 = xt * 2 – (x0 + x2) / 2;
y1 = yt * 2 – (y0 + y2) / 2;
x1,y1是实际控制点的位置,xt,yt是通过的目标点的位置,x0,y0是起点位置,x2,y2是终点位置
与上图的区别可见。
参照理解地址:http://www.bianceng.cn/Design/FLASH/201005/16840.htm