zoukankan      html  css  js  c++  java
  • (转)贝塞尔曲线

    今天周末刚好来学习数学的知识,在csdn上找到关于贝塞尔曲线的某些知识,然后我看了之后感觉还不错,特转来自己的博客并对其中的某些知识按照自己的看后理解进行修改。

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

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

    在平面内任选 3 个不共线的点,依次用线段连接。

    enter image description here

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

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

    连接这两点 DE。

    enter image description here

    从新的线段 DE 上再次找出相同比例的点 F,使得 DF:DE = AD:AB = BE:BCenter 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

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

  • 相关阅读:
    无人机一体化时空信息采集服务平台
    行业大秀:EasyEarth Show!
    EasyEarth三维可视化解决方案——智慧林业
    DJI Terra+EasyEarth让数据获取与应用无缝衔接
    无人机一体化3DGIS服务平台
    EasyEarth三维可视化解决方案——智慧园区
    【闲谈】如何统计字符串中出现最多的字母与个数
    嗨:说您呢,循环了解一下
    状态模式与策略模式
    一次异步处理
  • 原文地址:https://www.cnblogs.com/mrdoor/p/4966649.html
Copyright © 2011-2022 走看看