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

  • 相关阅读:
    5月做题计划(数据结构)
    SRM 545 DIV2
    6月做题计划(递归与分治)
    POJ 3121 The SetStack Computer
    struts2初步学习路线
    my97datepicker日历展示出现中文乱码的问题
    tomcat请求数据的编码设置
    STRUT2传递参数中文乱码解决方法
    js mine 类型javascripttext/javascript,application/javascript, and appliation/xjavascript
    eclipse内存设置参数
  • 原文地址:https://www.cnblogs.com/losophy/p/9908965.html
Copyright © 2011-2022 走看看