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

    绘制曲线

    ​ 相对于直线而言,曲线的绘制与坐标关系更难理解一些。由于LayaAir引擎绘制的是贝塞尔曲线,所以本文中先针对贝塞尔曲线的基础进行说明,然后再结合引擎的API进行讲解。

    一、贝塞尔曲线的基础

    ​ 贝塞尔曲线在港澳台等地称为貝茲曲線,新加坡马来西亚等地称为贝济埃曲线。一般的矢量图形软件通过它来精确画出曲线,贝塞尔曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

    ​ 贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。

    ​ 基于线性、二次方、三次方等公式的不同,贝塞尔曲线也被称为一次、二次……五次贝塞尔曲线,有些文章也称为一阶、二阶……说的是一回事。下面通过动图让大家直观的理解一下:

    1.1 一次贝塞尔曲线

    ​ 1.gif

    ​ (图1)

    ​ 说明:上图是由 P0 至 P1 的连续点, 描述的是一条线性的贝赛尔曲线。线性贝塞尔曲线函数中的 t 会经过由 P0 至 P1 的 B(t) 所描述的曲线。例如当 t=0.25 时,B(t) 即一条由点 P0 至 P1 路径的四分之一处。就像由 0 至 1 的连续 t,B(t) 描述一条由 P0 至 P1 的直线。

    1.2 二次贝塞尔曲线

    ​ 2.gif

    ​ (图2)

    ​ blob.png

    ​ (图3)

    ​ 说明:为建构二次贝塞尔曲线,上图由 P0 至 P1 的连续点 Q0,描述一条线性贝塞尔曲线。由 P1 至 P2 的连续点 Q1,描述一条线性贝塞尔曲线。由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。

    1.3 三次贝塞尔曲线

    ​ 3.gif

    ​ (图4)

    ​ blob.png

    ​ (图5)

    ​ 说明:对于三次曲线,可由线性贝塞尔曲线描述的中介点 Q0、Q1、Q2,和由二次曲线描述的点 R0、R1 所建构。

    1.4 高阶贝塞尔曲线

    ​ 由于高阶贝塞尔曲线并不常见,本文将不再详细说明,想对贝塞尔曲线原理了解更多的可以查看其它相关文章。

    ​ 4.gif

    ​ (图6) 四次贝塞尔曲线

    ​ 5.gif

    ​ (图7) 五次贝塞尔曲线

    https://ldc.layabox.com/doc/?nav=zh-ts-1-4-2

  • 相关阅读:
    gain 基尼系数
    luogu P5826 【模板】子序列自动机 主席树 vector 二分
    牛客挑战赛39 树与异或 离线 树上莫队 树状数组 约数
    4.22 省选模拟赛 三元组 manacher 回文自动机
    4.22 省选模拟赛 最优价值 网络流 最大权闭合子图
    4.18 省选模拟赛 消息传递 树剖 倍增 线段树维护等比数列
    luogu P4008 [NOI2003]文本编辑器 splay 块状链表
    牛客挑战赛39 密码系统 后缀数组
    luogu P1526 [NOI2003]智破连环阵 搜索+最大匹配+剪枝
    luogu P4095 [HEOI2013]Eden 的新背包问题 多重背包 背包的合并
  • 原文地址:https://www.cnblogs.com/losophy/p/9908965.html
Copyright © 2011-2022 走看看