求三次贝塞尔控制点的算法(实现细节)

时间:2015-02-05 21:01:07

标签: javascript algorithm curve bezier cubic-spline

我已经google了很多,但我找到的所有算法都使用方程来寻找控制点。我认为有更简单的解决方案,并在ExtJS源代码中找到了一些实现:http://docs-devel.sencha.com/extjs/4.1.2/source/Draw.html#Ext-draw-Draw-method-getAnchors。它使用最近的线之间的角度来检测控制点和一些黑客。

有人可以定义用于搜索控制点的算法是什么?我陷入了PI和角度的操纵。可能有更详细和更清晰的解释,或者这种解决问题的方法的共同点?

1 个答案:

答案 0 :(得分:2)

它是Catmull-Rom拟合:代码试图根据点X-1和X + 1的位置通过点X找到适当的切线,使得切线平行于线(X-1) ) - (X + 1),然后摆弄产生的控制点,以确保“传入”和“传出”切线产生美学上令人愉悦的曲线。

enter image description here

  1. 有分数
  2. 假设正切等于(p-1) - (p + 1)
  3. 一般看起来很可怕
  4. 缩放控制点以便更好地适应
  5. 你是如何做到第4步在技术上不再是Catmull-Rom,因为正确的Catmull-Rom样条线一旦设置了切线就会停止。如果你确实需要第4步,通常的方法是根据投影距离缩放点数:如果在线(X-1) - (X + 1)上投射点X,它很少会完全在线的中间,但距离点X-1的距离为v%,距离点X + 1的距离为(100-v)%,因此您可以相应地缩放找到的切线。