flash 曲线部分

给出一些点比如:

[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

 

 

原文地址:https://www.cnblogs.com/flashweb/p/2686839.html