最新消息:蔓草札记的微信公众号开通了,赶紧在微信通讯录公众号中搜索“蔓草札记”关注下吧 :)

过三点的二次贝塞尔曲线及其升阶

图像处理 xhhjin 6267浏览 3评论

贝塞尔曲线(Bézier curve)是计算机图形学中相当重要的参数曲线,Photoshop 中的钢笔效果,Flash5 的贝塞尔曲线工具都是它在计算机图形学中的具体应用。 贝塞尔曲线由法国雷诺汽车公司的工程师皮埃尔·贝塞尔(Pierre Bézier)于 1962 年所广泛发表,主要用来为汽车的主体进行设计,并且由于他给出了详细的计算公式,因此按照这样的公式绘制出来的曲线就用他的姓氏来命名。贝塞尔曲线由一系列的关键点来控制曲线的状态,这些关键点又可以分为两类,分别是端点和控制点:端点确定曲线的起始和结束位置, 控制点确定曲线的弯曲程度。由n+1 个控制点定义的贝塞尔曲线称为n次贝塞尔曲线。这里以二次贝塞尔曲线为例。

quadratic-bezier-sketch

quadratic-bezier-equation

其中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次贝塞尔曲线,具体见维基百科贝塞尔曲线升阶,据此可以将二次贝塞尔曲线转换成对应的三次贝塞尔曲线,新的端点和控制点分别为:

这样可以增大曲线调整的灵活性, 在某些只支持特定阶次贝塞尔曲线的软件中很有用 。


欢迎转载,转载请注明出处:蔓草札记 » 过三点的二次贝塞尔曲线及其升阶

♥ 喜欢 13 赞赏
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (3)

  1. Thanks a lot for mention me. Best, Gabriel Suchowolski (microbians) http://microbians.com
    Gabriel Suchowolski7年前 (2017-05-23)回复
  2. |P0-P1|*|P2-P1|怎么算啊, 求教.
    Yenmor4年前 (2020-08-24)回复
    • @Yenmor 就是两个向量的模长相乘。
      xhhjin博主4年前 (2020-08-24)回复