贝塞尔曲线的身影几乎在所有绘图软件中都有出现，下面的代码演示了如何用AS3.0画一段简单的贝塞尔曲线(没有使用Document文档类，想测试的朋友，直接把下面的代码复制贴到第一帧即可)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import
fl.controls.Label;
var
x1:
uint
=
80
;
var
y1:
uint
=
200
;
var
x2:
uint
=
450
;
var
y2:
uint
=
200
;
var
lbl1:Label =
new
Label();
var
lbl2:Label =
new
Label();
var
lbl3:Label =
new
Label();
lbl1.text=
"x1,y1"
;
lbl2.text=
"x2,y2"
;
lbl3.text=
"x3,y3"
;
addChild(lbl1);
addChild(lbl2);
addChild(lbl3);
lbl1.move(x1-
30
,y1+
5
);
lbl2.move(x2,y2+
5
);
stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMoveHandler);
function
MouseMoveHandler(e:MouseEvent):
void
{
drawCurve(mouseX,mouseY);
}
function
drawCurve(uX:
uint
,uY:
uint
):
void
{
graphics.clear();
//清除上次画的内容
graphics.lineStyle(
1
,
0xff0000
,
1
);
//设置线条为红色
graphics.drawCircle(x1,y1,
5
);
//在x1,y1(左端点)处画一个圈做标记
graphics.drawCircle(x2,y2,
5
);
//在x2,y2(右端点)处理一个圈做标记
var
x3:
uint
=uX;
var
y3:
uint
=uY;
lbl3.move(x3+
15
,y3);
graphics.drawCircle(x3,y3,
5
);
//在目标点，画一个圈
graphics.lineStyle(
1
,
0
,
0.1
);
//设置线条为黑色，且透明度为0.1
graphics.moveTo(x1,y1);
graphics.lineTo(x3,y3);
//画一根从左端点到目标点的线
graphics.moveTo(x2,y2);
graphics.lineTo(x3,y3);
//画一根从右端点到目标点的线
graphics.moveTo(x1,y1);
graphics.lineTo(x2,y2);
//画一根从左端点到右端点的线
graphics.lineStyle(
1
,
0xff0000
,
1
);
//设置线条为红色
graphics.moveTo(x1,y1);
graphics.curveTo(x3,y3,x2,y2);
//画一根从左端点出发，经过目标点，终点为右端点的贝赛尔曲线
}
drawCurve(
260
,
50
);
//刚显示时，先用该初始位置画线
|
一段曲线通常包含三个点：起点(x1,y1)，控制点(x3,y3)，终点(x2,y2)；也许大家也看出来了：该曲线最终并不经过鼠标所在的点(x3,y3)，在y轴方向上，曲线最大高度只有鼠标相对高度的一半，如果想真正的经过鼠标点，还要做一下修正（即要把控制点人为抬高或降低一些）:
修正公式为：新坐标 = 目标点坐标 * 2 - (起点坐标+终点坐标)/2
即把刚才代码的第56行：
|
1
|
graphics.curveTo(x3,y3,x2,y2);
|
改为：
|
1
|
graphics.curveTo(
2
*x3-(x1+x2)/
2
,
2
*y3-(y1+y2)/
2
,x2,y2);
|
下面再来看下更多点的情况，假如随便给定一些点，要求根据这些点，画一段“平滑”的曲线，最容易想到的思路就是：先从第1个点，画到第3点(第2点为控制点)，画出第一段，然后再以第3个点为开始，画到第5点（第4点为控制点）...类推直到全部画完
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
var
numPoints:
uint
=
5
;
const
X0 =
50
;
const
Y0 =
50
;
const
X_STEP =
70
;
const
Y_STEP =
30
;
//先对点初始化
var
points:
Array
=
new
Array
();
for
(
var
i:
int
=
0
; i < numPoints; i++) {
points[i] =
new
Object
();
points[i].x = X0 + i * X_STEP;
var
tY:
int
= (i%
2
)==
0
? Y_STEP : (-
1
*Y_STEP);
//trace(tY);
points[i].y = Y0 + tY;
graphics.lineStyle(
1
,
0xff0000
,
1
);
graphics.drawCircle(points[i].x,points[i].y,(i+
2
)*
2
);
//为了更直观，把这几个点都圈标出来
}
graphics.lineStyle(
1
);
//先将画笔移到第一个点
graphics.moveTo(points[
0
].x, points[
0
].y);
//由于划一条曲线起码要有三个点(起点，终点，控制点)，所以循环变量每次+2
for
(i =
1
; i < numPoints; i +=
2
) {
graphics.curveTo(points[i].x, points[i].y, points[i +
1
].x, points[i +
1
].y);
}
|
但是这样有一个问题，各段曲线之间的连接并不平滑，因为这完全只是把各段曲线简单的强型拼在一起而已，为了实现平滑，我们还得动点脑筋
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
var
numPoints:
uint
=
7
;
const
X0 =
50
;
const
Y0 =
100
;
const
X_STEP =
70
;
const
Y_STEP =
90
;
//先对点初始化
var
points:
Array
=
new
Array
();
for
(
var
i:
int
=
0
; i < numPoints; i++) {
points[i] =
new
Object
();
points[i].x = X0 + i * X_STEP;
var
tY:
int
= (i%
2
)==
0
? Y_STEP : (-
1
*Y_STEP);
//trace(tY);
points[i].y = Y0 + tY;
graphics.lineStyle(
2
,
0xff0000
,
1
);
graphics.drawCircle(points[i].x,points[i].y,
3
);
//为了更直观，把这几个点都圈标出来
}
//为了看得更清楚，把新加的点，用蓝色标出来
for
(i =
1
; i < numPoints -
2
; i ++) {
var
_xc:
Number
= (points[i].x + points[i +
1
].x) /
2
;
var
_yc:
Number
= (points[i].y + points[i +
1
].y) /
2
;
graphics.lineStyle(
3
,
0x0000ff
,
1
);
graphics.drawCircle(_xc,_yc,
3
);
}
graphics.lineStyle(
1
);
//先把画笔移到第一点
graphics.moveTo(points[
0
].x, points[
0
].y);
//去掉首尾二点后，根据剩下的点和新加的点画曲线
for
(i =
1
; i < numPoints -
2
; 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);
}
//处理最后一点
graphics.curveTo(points[i].x, points[i].y, points[i+
1
].x, points[i+
1
].y);
|
ok，这样就平滑了，来看下原理：
先把第一点跟最后一点忽略掉（why? 因为刚才的问题仅出在各段曲线的连接点上，而第一段的开头与最后一段曲线的结尾本身没有不平滑的问题，所以我们修正时，不需要管二端），然后在各点之间插入一个新的辅助点(即上图中蓝色的点)，点的位置其实可以随便定义，本例中正好取了中间位置，然后把这些新加的蓝色点以原来的头尾二点整体看作起始点与结束点，其它的点看做控制点（即去掉头尾后的红点），这样就行了 :)
类似的，我们还可以再增加三个辅助点，以达到闭合封闭曲线的效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
var
numPoints:
uint
=
7
;
const
X0 =
50
;
const
Y0 =
100
;
const
X_STEP =
70
;
const
Y_STEP =
90
;
//先对点初始化
var
points:
Array
=
new
Array
();
for
(
var
i:
int
=
0
; i < numPoints; i++) {
points[i] =
new
Object
();
points[i].x = X0 + i * X_STEP;
var
tY:
int
= (i%
2
)==
0
? Y_STEP : (-
1
*Y_STEP);
//trace(tY);
points[i].y = Y0 + tY;
graphics.lineStyle(
2
,
0xff0000
,
1
);
graphics.drawCircle(points[i].x,points[i].y,
3
);
//为了更直观，把这几个点都圈标出来
}
var
_X_BEGIN = (points[
0
].x + points[
1
].x) /
2
;
var
_Y_BEGIN = (points[
0
].y + points[
1
].y) /
2
;
graphics.lineStyle(
3
,
0x00ff00
,
1
);
graphics.drawCircle(_X_BEGIN,_Y_BEGIN,
3
);
//为了看得更清楚，把新加的点，用蓝色标出来
for
(i =
1
; i < numPoints -
2
; i ++) {
var
_xc:
Number
= (points[i].x + points[i +
1
].x) /
2
;
var
_yc:
Number
= (points[i].y + points[i +
1
].y) /
2
;
graphics.lineStyle(
3
,
0x0000ff
,
1
);
graphics.drawCircle(_xc,_yc,
3
);
}
graphics.lineStyle(
1
);
//先把画笔移到第一个辅助点
graphics.moveTo(_X_BEGIN, _Y_BEGIN);
//去掉首尾二点后，根据剩下的点和新加的点画曲线
for
(i =
1
; i < numPoints -
2
; 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
_len:
uint
= points.length;
//倒数第二个绿点
var
_X_END_1 = (points[_len-
2
].x + points[_len-
1
].x)/
2
;
var
_Y_END_1 = (points[_len-
2
].y + points[_len-
1
].y)/
2
;
//最后一个绿点
var
_X_END_2 = (points[_len-
1
].x + points[
0
].x)/
2
;
var
_Y_END_2 = (points[_len-
1
].y + points[
0
].y)/
2
;
//最后一个蓝点为起点，到_X_END_1,_Y_END_1，倒数第二个红点为控制点
graphics.curveTo(points[i].x, points[i].y, _X_END_1,_Y_END_1);
graphics.curveTo(points[_len-
1
].x, points[_len-
1
].y, _X_END_2,_Y_END_2);
graphics.curveTo(points[
0
].x, points[
0
].y, _X_BEGIN,_Y_BEGIN);
graphics.lineStyle(
3
,
0x00ff00
,
1
);
graphics.drawCircle(_X_END_1,_Y_END_1,
3
);
graphics.drawCircle(_X_END_2,_Y_END_2,
3
);
|
最后把上面这段代码抽象封装一下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
package
{
import
flash.display.Sprite;
import
flash.events.MouseEvent;
import
flash.events.Event;
import
flash.display.Graphics;
import
flash.ui.MouseCursor;
import
flash.ui.Mouse;
public
class
ShowCurve
extends
Sprite {
private
var
isStop:
Boolean
;
public
function
ShowCurve():
void
{
init();
}
private
function
init() {
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
isStop =
false
;
Mouse.cursor = MouseCursor.BUTTON;
}
private
function
MouseDownHandler(e:MouseEvent) {
if
(!isStop){
removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
isStop =
true
;
}
else
{
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
isStop =
false
;
}
}
private
function
EnterFrameHandler(e:Event):
void
{
graphics.clear();
var
numPoints:
uint
=
9
;
//先对点初始化
var
points:
Array
=
new
Array
();
for
(
var
i:
int
=
0
; i < numPoints; i++) {
points[i] =
new
Object
();
points[i].x=stage.stageWidth*Math.random();
points[i].y=stage.stageHeight*Math.random();
graphics.lineStyle(
2
,
0xff0000
,
1
);
graphics.drawCircle(points[i].x,points[i].y,
1
);
//为了更直观，把这几个点都圈标出来
}
var
_X_BEGIN = (points[
0
].x + points[
1
].x) /
2
;
var
_Y_BEGIN = (points[
0
].y + points[
1
].y) /
2
;
graphics.lineStyle(
1
,
0x00ff00
,
1
);
graphics.drawCircle(_X_BEGIN,_Y_BEGIN,
1
);
//为了看得更清楚，把新加的点，用蓝色标出来
for
(i =
1
; i < numPoints -
2
; i ++) {
var
_xc:
Number
= (points[i].x + points[i +
1
].x) /
2
;
var
_yc:
Number
= (points[i].y + points[i +
1
].y) /
2
;
graphics.lineStyle(
3
,
0x0000ff
,
1
);
graphics.drawCircle(_xc,_yc,
1
);
}
graphics.lineStyle(
1
);
//先把画笔移到第一个辅助点
graphics.moveTo(_X_BEGIN, _Y_BEGIN);
//去掉首尾二点后，根据剩下的点和新加的点画曲线
for
(i =
1
; i < numPoints -
2
; 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
_len:
uint
=points.length;
//倒数第二个绿点
var
_X_END_1 = (points[_len-
2
].x + points[_len-
1
].x)/
2
;
var
_Y_END_1 = (points[_len-
2
].y + points[_len-
1
].y)/
2
;
//最后一个绿点
var
_X_END_2 = (points[_len-
1
].x + points[
0
].x)/
2
;
var
_Y_END_2 = (points[_len-
1
].y + points[
0
].y)/
2
;
//最后一个蓝点为起点，到_X_END_1,_Y_END_1，倒数第二个红点为控制点
graphics.curveTo(points[i].x, points[i].y, _X_END_1,_Y_END_1);
graphics.curveTo(points[_len-
1
].x, points[_len-
1
].y, _X_END_2,_Y_END_2);
graphics.curveTo(points[
0
].x, points[
0
].y, _X_BEGIN,_Y_BEGIN);
graphics.lineStyle(
1
,
0x00ff00
,
1
);
graphics.drawCircle(_X_END_1,_Y_END_1,
1
);
graphics.drawCircle(_X_END_2,_Y_END_2,
1
);
}
}
}
|
注：本文中所演示的只是二次曲线，对于三次曲线或高阶曲线，就更复杂了。详情见维基百科: http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A
作者：
菩提树下的杨过
出处： http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
出处： http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
扫一扫
2385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
