- 浏览: 119135 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
zhouhaiyang88:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
xurichusheng:
huang-tao 写道你好,在吗?请问,我启动Tomcat时 ...
ActiveMq-JMS简单实例使用tomcat -
wgcooo:
javax.naming.NameNotFoundExcept ...
ActiveMq-JMS简单实例使用tomcat -
huang-tao:
你好,在吗?请问,我启动Tomcat时报如下错,是什么原因?= ...
ActiveMq-JMS简单实例使用tomcat -
Eric.Yan:
好文章,明天试一试
ActiveMq-JMS简单实例使用tomcat
贝塞尔曲线的身影几乎在所有绘图软件中都有出现,下面的代码演示了如何用AS3.0画一段简单的贝塞尔曲线(没有使用Document文档类,想测试的朋友,直接把下面的代码复制贴到第一帧即可)
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行:
graphics.curveTo(x3,y3,x2,y2);
改为:
graphics.curveTo(
2
*x3-(x1+x2)/
2
,
2
*y3-(y1+y2)/
2
,x2,y2);
下面再来看下更多点的情况,假如随便给定一些点,要求根据这些点,画一段“平滑”的曲线,最容易想到的思路就是:先从第1个点,画到第3点(第2点为控制点),画出第一段,然后再以第3个点为开始,画到第5点(第4点为控制点)...类推直到全部画完
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);
}
但是这样有一个问题,各段曲线之间的连接并不平滑,因为这完全只是把各段曲线简单的强型拼在一起而已,为了实现平滑,我们还得动点脑筋
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? 因为刚才的问题仅出在各段曲线的连接点上,而第一段的开头与最后一段曲线的结尾本身没有不平滑的问题,所以我们修正时,不需要管二端),然后在各点之间插入一个新的辅助点(即上图中蓝色的点),点的位置其实可以随便定义,本例中正好取了中间位置,然后把这些新加的蓝色点以原来的头尾二点整体看作起始点与结束点,其它的点看做控制点(即去掉头尾后的红点),这样就行了 :)
类似的,我们还可以再增加三个辅助点,以达到闭合封闭曲线的效果:
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
);
最后把上面这段代码抽象封装一下:
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
);
}
}
}
发表评论
-
Flash/Flex学习笔记(50):矩阵变换
2011-04-24 13:52 1132先回顾一下Silvelright中的矩阵变换[转]WPF中的M ... -
Flash/Flex学习笔记(49):背面剔除与 3D 灯光
2011-04-24 13:50 955今天继续:上一回Flash/Flex学习笔记(50):3D线条 ... -
Flash/Flex学习笔记(48):迷你滚动条ScrollBar
2011-04-24 13:46 1032先看最终效果: 整个swf最终不到4k, ... -
Flash/Flex学习笔记(47):利用FMS快速创建一个文本聊天室
2011-04-24 13:45 956先来看客户端fla的构成: 第一帧:登录界面 第一帧的 ... -
Flash/Flex学习笔记(46):使用TweenLite
2011-04-24 13:43 1643TweenLite是第三方出品的专用于各种缓动动画的类库,其性 ... -
Flash/Flex学习笔记(45):3维旋转与透视变换(PerspectiveProjection)
2011-04-24 13:41 1181Flash/Flex学习笔记:3D基础 里已经介绍了3D透 ... -
Flash/Flex学习笔记(44):3D线条与填充
2011-04-24 13:39 10683D线条:把上一篇中的3D坐标旋转示例稍做修改,用线把各个 ... -
Flash/Flex学习笔记(43):3D基础
2011-04-24 13:34 1109之前我们所做的动画都 ... -
Flash/Flex学习笔记(42):反向运动学(下)
2011-04-24 13:30 894先要复习一下三角函数与余弦定理: 对于直角三角形,三边长 ... -
Flash/Flex学习笔记(41):反向运动学(上)
2011-04-24 13:29 908先回顾上篇所说的"正向运动学":以人行 ... -
Flash/Flex学习笔记(40):正向运动学
2011-04-24 13:27 853所谓"正向运动学"通俗点讲就是把几个连接部 ... -
Flash/Flex学习笔记(39):万有引力与粒子系统
2011-04-24 13:26 700万有引用公式: 其中G为万有引力常数 var numP ... -
Flash/Flex学习笔记(38):动量守恒与能量守恒
2011-04-24 13:24 911动能公式: 动量公式: 动量守恒: 能量守恒: ... -
Flash/Flex学习笔记(37):坐标旋转
2011-04-24 13:23 988坐标旋转是个啥概念呢? 如上图,(蓝色)小球 绕某一 ... -
Flash/Flex学习笔记(36):碰撞检测
2011-04-24 13:22 581碰撞检测基本上可能分为二类:对象与对象的碰撞检测、对象与点 ... -
Flash/Flex学习笔记(35):弹性运动续--弹簧
2011-04-24 13:21 729上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较 ... -
Flash/Flex学习笔记(34):弹性运动
2011-04-24 13:20 743动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运 ... -
Flash/Flex学习笔记(33):缓动动画
2011-04-24 13:18 969缓动 与 匀变速 看上去很类似,但其实有区别: 匀变速的 ... -
Flash/Flex学习笔记(32):不用系统组件(纯AS3)的视频播放器--只有8.82K
2011-04-24 13:17 1241以前为了赶项目,利用系统组件制作过一款视频播放器(见Fla ... -
Flash/Flex学习笔记(31):自己动手实现一个滑块控件(JimmySilder)
2011-04-24 13:15 934先看最终的演示: 滑块条的应用实在太广泛了:mp3播放器中声 ...
相关推荐
贝塞尔曲线生成工具和贝塞尔曲线画心形的源代码。
自动驾驶-决策规划算法八:贝塞尔曲线(C++)
1:贝塞尔曲线原理和实例(如贝塞尔曲线画圆,圆变心,粘性小红点) 2:PathNeasure原理和实例(旋转的小箭头) 3:属性动画原理和实例(雷达图,指示器,插值器。购物车。) 4:Scroller和VeloccityTracker 5:...
通用的贝塞尔曲线:一条贝塞尔曲线是由一组定义的控制点 P0到 Pn,在 n 调用它的顺序 (n = 1 为线性,2 为二次,等.)。第一个和最后一个控制点总是具有终结点的曲线;然而,中间两个控制点 (如果有的话) 一般不会位于...
基于OPENGL的贝塞尔曲线生成算法,运行时在白色区域时设立四个特征点,即可画出相应的贝塞尔曲线
用as代码实现的贝塞尔曲线。两个例子,都是非常好看的效果!
贝塞尔曲线的渲染脚本,可以在Unity的scene中,通过拖动TargetObject(即圆盘的位置变化), 可以观察到整体曲线的变化。 设计之初是为了,用于HTC VIVE 手柄 触发的位移传送曲线的显示。 参考了教程: 贝塞尔...
Qt 中有相当方便的绘制接口 ( 由 QPainter 提供 ) 。 例如贝塞尔曲线的 API: QPainterPath 的 quadTo() 和 ...因此,我想到利用贝塞尔的公式生成曲线点,然后用直线来连接,即可实现「 N阶贝塞尔曲线绘制 」。
HTML实现贝塞尔曲线
EXCELVBA贝塞尔曲线及插值:根据其中采用的算法, 进一步增添根据 X坐标求 Y坐标, 或根据 Y坐标求X坐标,更切合实际需求
这是一份C语言版本的bezier曲线(贝塞尔曲线)绘制代码,实现了二次和三次bezier曲线的绘制,可用于一系列给定的离散点的曲线平滑。此代码封装成函数,可以直接调用。脚本里边有参数和代码的注释,可供使用者学习和...
用二次贝塞尔曲线参数方程实现二次贝塞尔曲线绘制
贝塞尔曲线做一个曲线动画框架
用TC生存二次贝塞尔曲线,其实稍微改一下就可以实现三次贝塞尔曲线的了。
本方讲述了二次贝塞尔曲线算法,并给出了实例程序的讲解
# n阶贝塞尔曲线画图-2.js//N为贝塞尔曲线阶数,这里以6阶为例//a为贝塞尔曲线特征点,元素个数应为阶数加一//求更高阶只要修改N的值与添加特征点即可/
在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线...
贝塞尔曲线实现直播点赞效果
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线...在Flash4中还没有完整的曲线工具,而在Flash5里面已经提供出贝塞尔曲线工具。
此资源为利用unity制作的贝塞尔曲线实现的多种曲线,只需要拖拽自己创建的transform和定义点的个数实现多种曲线