贝塞尔曲线(Bézier curve)是计算机图形学中相当重要的参数曲线,Photoshop 中的钢笔效果,Flash5 的贝塞尔曲线工具都是它在计算机图形学中的具体应用。 贝塞尔曲线由法国雷诺汽车公司的工程师皮埃尔·贝塞尔(Pierre Bézier)于 1962 年所广泛发表,主要用来为汽车的主体进行设计,并且由于他给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名。贝塞尔曲线由一系列的关键点来控制曲线的状态,这些关键点又可以分为两类,分别是端点和控制点:端点确定曲线的起始和结束位置, 控制点确定曲线的弯曲程度。由n+1
个控制点定义的贝塞尔曲线称为n
次贝塞尔曲线。这里以二次贝塞尔曲线为例。 其中P0
,P2
为端点,P1
为控制点,正常的贝塞尔曲线是不通过P1
控制点的,因此我们的目标是希望找到一个新的点PC
,使得由P0
,Pc
,P2
点构造的贝塞尔曲线过P1
点,如下示意图。 这里不说过程,只写结果了,最终PC
点的坐标为: 具体推导过程见 Gabriel Suchowolski 的论文 Quadratic bezier through three points,我用 HTML5 的 canvas 标签实现了个网页上的 demo,开源到了 Github 上,效果见: http://github.xuhehuan.com/quadratic-bezier/quadratic-bezier.html,可随意拖动三点的位置,查看变形效果。 另外,根据贝塞尔曲线的性质:n
次贝塞尔曲线可以转换为一个形状完全相同的n+1
次贝塞尔曲线,具体见维基百科贝塞尔曲线升阶,据此可以将二次贝塞尔曲线转换成对应的三次贝塞尔曲线,新的端点和控制点分别为: 这样可以增大曲线调整的灵活性, 在某些只支持特定阶次贝塞尔曲线的软件中很有用 。
查看原文:http://xuhehuan.com/2608.html
过三点的二次贝塞尔曲线及其升阶
最新推荐文章于 2024-08-12 13:13:10 发布