彻底搞懂贝塞尔曲线的原理

这篇具有很好参考价值的文章主要介绍了彻底搞懂贝塞尔曲线的原理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

贝塞尔曲线介绍

我们在前面讲了绘制自定义曲线,而实际开发过程还会遇到更复杂的图形绘制,比如下面的这些图形:

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

这时候就需要用到贝塞尔曲线了。下面是百科关于贝塞尔曲线的介绍。

贝塞尔曲线就是这样的一条曲线,它是依据四个位置任意的点坐标绘制出的一条光滑曲线。在历史上,研究贝塞尔曲线的人最初是按照已知曲线参数方程来确定四个点的思路设计出这种矢量曲线绘制法。贝塞尔曲线的有趣之处更在于它的“皮筋效应”,也就是说,随着点有规律地移动,曲线将产生皮筋伸引一样的变换,带来视觉上的冲击。1962年,法国数学家 Pierre Bézier第一个研究了这种矢量绘制曲线的方法,并给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名是为贝塞尔曲线。

这上面的介绍实际有点不太正确,三次贝塞尔曲线才需要4个点,而还有一次贝塞尔曲线(实际是线段),二次次贝塞尔曲线以及高阶贝塞尔曲线,只是我们常用的是三次贝塞尔曲线。要理解贝塞尔曲线怎么来的还得从1次贝塞尔曲线和2次贝塞尔曲线说起。

一次贝塞尔曲线

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

如上图所示,P 点随时间 t 在 P0到 P1两点之间的线段移动,t=0时刻,P 点和 P0重合,t=1时刻 P 点和 P1重合。最终推导得到 P 点的位置和 P0,P1及 t 的关系是一个线性插值函数:

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

二次贝塞尔取曲线

二次贝塞尔曲线控制点有3个,如下图所示。

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

一共有 P0、P1和 P2三个控制点,那P 点的位置怎么来的呢?其实P 点是 A 点到 B 点的一次贝塞尔曲线,而 A 点是 P0到 P1的一次贝塞尔曲线,B 点是 P1到 P2的一次贝塞尔曲线。随着时间 t 的变化,A 点和 B 点的位置会改变,从而使得 P 点会沿着 P0、P1到 P2的一段曲线运动,而更为神气的是这是一条平滑的曲线。下面是数学公式推导和实际的动图演示。

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档
贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

三次贝塞尔曲线

有了二次贝塞尔曲线的推导过程,实际上三次贝塞尔曲线的推导过程是一样的。

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

三次贝塞尔曲线有4个控制点,上图各个点的关系如下:

  • A 点是 P0到 P1的一次贝塞尔曲线,B 点是 P1到 P2的一次贝塞尔曲线,C 点是 P2到 P3的一次贝塞尔曲线;

  • D 点是 A 点到 B 点的一次贝塞尔曲线(也是 P0,P1和 P2的二次贝塞尔曲线),E 点是 B 点到 C 点的一次贝塞尔曲线(也是 P1,P2到 P3的二次贝塞尔曲线);

  • P 点是 D 点到 E 点的一次贝塞尔曲线,也是 A ,B 和 C 的二次贝塞尔曲线,进而就是 P0,P1,P2和 P3的三次贝塞尔曲线了。

下面是动图展示 P 点的移动过程。

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

数学公式推导过程如下:

贝塞尔曲线,Android,贝塞尔曲线,线性代数,图形绘制,数学公式,android,Powered by 金山文档

高阶贝塞尔函数

实际上,贝塞尔函数还可以继续增加控制点,推导的过程都是一样的,只是随着点数的增加,计算的量会越大,而我们大多数情况下用三阶贝塞尔曲线就足够了。

总结

本篇介绍了贝塞尔函数的概念,运动点的过程和公式推导,相信通过这些内容,大家应该能够知道贝塞尔曲线怎么回事了。下一篇我们来用 Flutter 绘制贝塞尔曲线,体验一下数学之美!文章来源地址https://www.toymoban.com/news/detail-829257.html

到了这里,关于彻底搞懂贝塞尔曲线的原理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • c++计算贝塞尔曲线(折线平滑为曲线)坐标方法

    效果可查看上一篇博文: js手动画平滑曲线,贝塞尔曲线拟合 【代码】js手动画平滑曲线,贝塞尔曲线拟合。 https://blog.csdn.net/qiufeng_xinqing/article/details/131711963?spm=1001.2014.3001.5502 代码如下:

    2024年02月16日
    浏览(29)
  • CSS动画中的贝塞尔曲线

    最近在学习CSS动画,其中动画时间函数的部分涉及到了 贝塞尔曲线 的相关知识。对于这部分知识,之前一直没有好好学习过,正好借着这个机会学习下。 首先简单介绍下贝塞尔曲线。 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲

    2024年02月09日
    浏览(61)
  • unity 曲线可视化图表制作(lineRenderer + 贝塞尔曲线)

    需求要实现一个动态变化的曲线 思路: 分为两部分:画线和平滑曲线 首先解决画线问题: 1.lineRenderer 2.texture的setpixel 肯定选已经做好的轮子1啦 平滑曲线思路: 1.抛物线 2.贝塞尔曲线 抛物线做连续的曲线太抽象了 肯定选贝塞尔曲线 先了解一下贝塞尔曲线 一次贝塞尔 对应

    2023年04月08日
    浏览(33)
  • Godot插值、贝塞尔曲线和Astar寻路

    线性插值是采用一次多项式上进行的插值计算,任意给定两个值A和B,那么在A和B之间的任意值可以定义为: P(t) = A * (1 - t) + B * t,0 = t = 1。 数学中用于线性拟合,游戏应用可以做出跟随效果(宠物跟随、npc跟随) 贝塞尔是插值的应用之一。贝塞尔曲线是为工业设计,是图形

    2024年04月14日
    浏览(32)
  • 贝塞尔曲线的python实现(简单易理解)

    贝塞尔曲线在计算机图形学中被大量使用,通常可以产生平滑的曲线。比如ps中的钢笔工具,就是利用的这种原理。由于用计算机画图大部分时间是操作鼠标来掌握线条的路径,与手绘的感觉和效果有很大的差别。即使是一位精明的画师能轻松绘出各种图形,拿到鼠标想随心

    2024年02月16日
    浏览(30)
  • 【Unity】运行时创建曲线(贝塞尔的运用)

    1. 实现的目标 在运行状态下创建一条可以使用贝塞尔方法实时编辑的网格曲线。 2. 原理介绍 2.1 曲线的创建 unity建立网格曲线可以参考Unity程序化网格体的实现方法。主要分为顶点,三角面,UV和法线。笔者有类似的文章unity 线绳管道纯代码创建方法_,详细的讲解了网格线的

    2024年02月04日
    浏览(30)
  • Unity中的数学基础——贝塞尔曲线

    一:前言  一条贝塞尔曲线是由一组定义的控制点P0到 Pn,n=1为线性,n=2为二次......第一个和最后一个控制点称为起点和终点,中间的控制点一般不会位于曲线上  获取两个点之间的点就是通过线性插值( Mathf.Lerp),0 = t = 1 二:贝塞尔曲线公式 ——线性公式:给定点P0、P

    2024年02月11日
    浏览(30)
  • Unity ——使用贝塞尔曲线对三维管状物体进行弯曲

    参考链接:【Unity】弹性鱼竿简单实现-通过贝塞尔曲线修改Mesh - 简书 参考论文:吴晓亮, 黄襄念. Unity 中使用贝塞尔曲线对三维物体进行弯曲[J]. 现代计算机, 2016 (5): 57-59. unity项目下载:https://download.csdn.net/download/weixin_43042683/87690343 效果图 随着虚拟现实的发展,在游戏引擎中

    2024年02月11日
    浏览(36)
  • Bezier Curve 贝塞尔曲线 - 在Unity中实现路径编辑

    贝塞尔曲线( Bezier Curve ),又称贝兹曲线或贝济埃曲线,是计算机图形学中相当重要的参数曲线,在我们常用的软件如 Photo Shop 中就有贝塞尔曲线工具,本文简单介绍贝塞尔曲线在Unity中的实现与应用。 给顶点P 0 、P 1 ,只是一条两点之间的直线,公式如下: B(t) = P 0 + (P

    2024年01月23日
    浏览(33)
  • 【路径规划】局部路径规划算法——贝塞尔曲线法(含python实现 | c++实现)

    路径规划与轨迹跟踪系列算法 曲线杂谈(二):Bezier曲线的特殊性质 贝塞尔曲线的特性总结 贝塞尔曲线于1962年由法国工程师皮埃尔·贝塞尔( Pierre Bézier)发表,他运用贝塞尔曲线来为汽车的主体进行设计。 贝塞尔曲线是应用于二维图形应用程序的数学曲线,由一组称为

    2024年02月14日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包