贝塞尔曲线扫盲

最新推荐文章于 2021-05-26 02:51:04 发布
最新推荐文章于 2021-05-26 02:51:04 发布
阅读量251 收藏
点赞数
分类专栏： Cshap

转载至：http://blog.csdn.net/cdnight/article/details/48468653

贝塞尔曲线扫盲

相信很多同学都知道“贝塞尔曲线”这个词，我们在很多地方都能经常看到。但是，可能并不是每位同学都清楚地知道，到底什么是“贝塞尔曲线”，又是什么特点让它有这么高的知名度。

贝塞尔曲线的数学基础是早在 1912 年就广为人知的伯恩斯坦多项式。但直到 1959 年，当时就职于雪铁龙的法国数学家 Paul de Casteljau 才开始对它进行图形化应用的尝试，并提出了一种数值稳定的 de Casteljau 算法。然而贝塞尔曲线的得名，却是由于 1962 年另一位就职于雷诺的法国工程师 Pierre Bézier 的广泛宣传。他使用这种只需要很少的控制点就能够生成复杂平滑曲线的方法，来辅助汽车车体的工业设计。

正是因为控制简便却具有极强的描述能力，贝塞尔曲线在工业设计领域迅速得到了广泛的应用。不仅如此，在计算机图形学领域，尤其是矢量图形学，贝塞尔曲线也占有重要的地位。今天我们最常见的一些矢量绘图软件，如 Flash、Illustrator、CorelDraw 等，无一例外都提供了绘制贝塞尔曲线的功能。甚至像 Photoshop 这样的位图编辑软件，也把贝塞尔曲线作为仅有的矢量绘制工具（钢笔工具）包含其中。

贝塞尔曲线在 web 开发领域同样占有一席之地。CSS3 新增了 transition-timing-function 属性，它的取值就可以设置为一个三次贝塞尔曲线方程。在此之前，也有不少 JavaScript 动画库使用贝塞尔曲线来实现美观逼真的缓动效果。

下面我们就通过例子来了解一下如何用 de Casteljau 算法绘制一条贝塞尔曲线。

在平面内任选 3 个不共线的点，依次用线段连接。enter image description here

在第一条线段上任选一个点 D。计算该点到线段起点的距离 AD，与该线段总长 AB 的比例。enter image description here

根据上一步得到的比例，从第二条线段上找出对应的点 E，使得 AD:AB= BE:BC。enter image description here

连接这两点 DE。enter image description here

从新的线段 DE 上再次找出相同比例的点 F，使得 DF:DE= AD:AB= BE:BC。enter image description here

到这里，我们就确定了贝塞尔曲线上的一个点 F。接下来，请稍微回想一下中学所学的极限知识，让选取的点 D 在第一条线段上从起点 A 移动到终点 B，找出所有的贝塞尔曲线上的点 F。所有的点找出来之后，我们也得到了这条贝塞尔曲线。enter image description here

如果你实在想象不出这个过程，没关系，看动画！enter image description here

回过头来看这条贝塞尔曲线，为了确定曲线上的一个点，需要进行两轮取点的操作，因此我们称得到的贝塞尔曲线为二次曲线（这样记忆很直观，但曲线的次数其实是由前面提到的伯恩斯坦多项式决定的）。

当控制点个数为 4 时，情况是怎样的？enter image description here

步骤都是相同的，只不过我们每确定一个贝塞尔曲线上的点，要进行三轮取点操作。如图，AE:AB= BF:BC= CG:CD= EH:EF= FI:FG= HJ:HI，其中点 J 就是最终得到的贝塞尔曲线上的一个点。enter image description here

这样我们得到的是一条三次贝塞尔曲线。enter image description here

看过了二次和三次曲线，更高次的贝塞尔曲线大家应该也知道要怎么画了吧。那么比二次曲线更简单的一次（线性）贝塞尔曲线存在吗？长什么样？根据前面的介绍，只要稍作思考，想必你也能猜出来了。哈！就是一条直线~enter image description here

能画曲线也能画直线，是不是很厉害？要绘制更复杂的曲线，控制点的增加也仅仅是线性的。这一特点使其不光在工业设计领域大展拳脚，就连数学基础不好的人也可以比较容易地掌握，比如大多数平面美术设计师们。enter image description here

上面介绍的内容并不足以展示贝塞尔曲线的真正威力。推广到三维空间的贝塞尔曲面，以及更进一步的非均匀有理 B 样条（NURBS），早已成为当今计算机辅助设计（CAD）的行业标准，不论是我们平常用到的各种产品，还是在电影院看到的精彩大片，都少不了它们的功劳。enter image description here

enter image description here

动态绘制贝塞尔曲线的在线演示

X暗黑X
关注
专栏目录
n 阶贝塞尔曲线计算公式实现
Duan的博客
05-30 3万+
n 次贝塞尔曲线计算公式实现，从贝塞尔曲线的一般参数方程入手，找出变化规律，实现输入任意点的坐标，返回连接所有点的贝塞尔曲线上的指定个数的点的坐标。
css3 动画（二）贝塞尔曲线
weixin_34129696的博客
07-09 668
前言 上一篇 css3 动画（一） transition 中，介绍了 transition 的用法。其中 transition 包含四个可设置的属性： 有过渡效果的属性 过渡时长 过渡函数？ 过渡时延 其中，1、2 以及 4 都挺好理解的，但是 3 是个什么东西？其实 3 是 css3 中的 timing-function，其中 3 ...
贝塞尔曲线
09-25
从2阶到7阶的贝赛尔曲线 private static final int MAX_COUNT = 7; // 贝塞尔曲线最大阶数 private static final int REGION_WIDTH = 30; // 合法区域宽度 private static final int FINGER_RECT_SIZE = 60; // 矩形尺寸 private static final int BEZIER_WIDTH = 10; // 贝塞尔曲线线宽 private static final int TANGENT_WIDTH = 6; // 切线线宽 private static final int CONTROL_WIDTH = 12; // 控制点连线线宽 private static final int CONTROL_RADIUS = 12; // 控制点半径 private static final int TEXT_SIZE = 40; // 文字画笔尺寸 private static final int TEXT_HEIGHT = 60; // 文本高度 private static final int RATE = 10; // 移动速率 private static final int HANDLER_WHAT = 100; private static final int FRAME = 1000; // 1000帧 private static final String[] TANGENT_COLORS = {"#7fff00", "#7a67ee", "#ee82ee", "#ffd700", "#1c86ee", "#8b8b00"}; // 切线颜色 private static final int STATE_READY = 0x0001; private static final int STATE_RUNNING = 0x0002; private static final int STATE_STOP = 0x0004; private static final int STATE_TOUCH = 0x0010; private Path mBezierPath = null; // 贝塞尔曲线路径 private Paint mBezierPaint = null; // 贝塞尔曲线画笔 private Paint mMovingPaint = null; // 移动点画笔 private Paint mControlPaint = null; // 控制点画笔 private Paint mTangentPaint = null; // 切线画笔 private Paint mLinePaint = null; // 固定线画笔 private Paint mTextPointPaint = null; // 点画笔 private Paint mTextPaint = null; // 文字画笔 private ArrayList mBezierPoints = null; // 贝塞尔曲线点集 private PointF mBezierPoint = null; // 贝塞尔曲线移动点 private ArrayList mControlPoints = null; // 控制点集 private ArrayList<ArrayList<ArrayList>> mTangentPoints; // 切线点集 private ArrayList<ArrayList> mInstantTangentPoints; private int mR = 0; // 移动速率 private int mRate = RATE; // 速率 private int mState; // 状态 private boolean mLoop = false; // 设置是否循环 private boolean mTangent = true; // 设置是否显示切线 private int mWidth = 0, mHe
贝塞尔曲线 总结
鹰击长空
08-08 1万+
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义：起始点、终止点（也称锚点）、控制点。通过调整控制点，贝塞尔曲线的形状会发生变化。 1962年，法国数学家Pierre Bézier第一个研究了这种矢量绘制曲线的方法，并给出了详细的计算公式，因此按照这样的公式绘制出来的曲线就用他的姓氏来命名，称为贝塞尔曲线。     以下公式中：B(t)为t时间下 点的
android贝塞尔曲线动画,基于贝塞尔曲线的Android动画差值器
weixin_42314737的博客
05-26 995
一、简介贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau算法开发，以稳定数值的方法求出贝兹曲线。贝塞尔曲线不仅仅可以应用到工业设计中，在计算机动画开发中同样占有一席之地，通过构造贝塞尔曲线模拟物体运动的轨迹、速度甚至加速度，来达...
Path从懵逼到精通——贝塞尔曲线
deziko
03-19 676
上一篇我们说了 Path 的基本操作，这一篇让我们来说一下 Path 的进阶用法——贝塞尔曲线。那什么是贝塞尔曲线？贝塞尔曲线能在 Android 中实现什么效果？以及如何做到的？这篇文章都会告诉你。什么是贝塞尔曲线？贝塞尔曲线是由皮埃尔·贝塞尔发表的，他主要应用于汽车的主体进行设计，后来成为计算机图形学相当重要的参数曲线。贝塞尔曲线由什么组成的？它通常由数据点和控制点两个部分组成的。那什么是数据点
贝塞尔曲线介绍及一阶、二阶推导
热门推荐
唯一的信仰
05-25 1万+
简介说明贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，当时主要用于汽车主体设计。　　通过比例进行不断地取点，点不断地汇成一条平滑的曲线。 　　具体点击请看贝塞尔曲线扫盲。推导很多推导过程，不好打出来，就直接上手展示我的艺术字了哈哈，丑不能拒。一阶贝塞尔曲线推导二阶贝塞尔曲线推导总结目前直推到了前两阶，还有很多知...
曲线之美 －－贝塞尔曲线
weixin_33770878的博客
08-28 235
原文：http://blog.csdn.net/killwd/article/details/1460478 贝塞尔曲线 维基百科 http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A 在图形图像编程时，我们常常需要根据一系列已知点坐标来确 定一条光滑曲线。其中有些曲线需要严格地通过所有的已知点，而有些...
Finding a Point on a Bézier Curve: De Casteljau's Algorithm
weixin_30247159的博客
03-11 107
转自：http://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/de-casteljau.html Finding a Point on a Bézier Curve: De Casteljau's Algorithm Following the construction of a Bézier curve, t...
【Unity3d游戏开发】游戏中的贝塞尔曲线以及其在Unity中的实现
weixin_34329187的博客
01-17 1163
　　RT，马三最近在参与一款足球游戏的开发，其中涉及到足球的各种运动轨迹和路径，比如射门的轨迹，高吊球，香蕉球的轨迹。最早的版本中马三是使用物理引擎加力的方式实现的足球各种运动，后来的版本中使用了根据物理学公式手动计算位置和物体速度的方式实现，现在这个版本中使用的是DoTween+贝塞尔曲线调节来实现。（关于它们之间的各种优缺点我们会在以后单独开一篇博客来探讨，届时也会放出源代码互相学习下）好了，...
掌握贝塞尔曲线绘制技术
常见的低阶贝塞尔曲线包括线段（一次贝塞尔曲线）、抛物线（二次贝塞尔曲线）和立方曲线（三次贝塞尔曲线）。 2. 曲线总是通过起始点和结束点，这是由贝塞尔曲线的性质决定的。 3. 曲线的控制点数量决定了曲线的阶数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值