javascript - 寻找三次贝塞尔控制点的算法（实现细节）

Question

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

有人可以定义这是哪种搜索控制点的算法吗？我被困在 PI 和角度的操作中。对于这种解决问题的方式，是否有更详细和更清晰的解释或共同的想法？

Answer 1

这是Catmull-Rom拟合：代码尝试根据点 X-1 和 X+1 的位置通过点 X 找到合适的切线，使得切线平行于线 (X-1)--(X +1），然后调整产生的控制点，以确保“传入”和“传出”切线产生美观的曲线。

1. 有积分
2. 假设正切等于 (p-1)--(p+1)
3. 这通常看起来很可怕
4. 稍微缩放控制点以获得更好的拟合

从技术上讲，您如何执行第 4 步不再是 Catmull-Rom，因为一旦设置了切线，真正的 Catmull-Rom 样条就会停止。如果您确实需要第 4 步，通常的方法是根据投影距离缩放点：如果您将点 X 投影在线 (X-1)--(X+1) 上，它很少会完全在直线的中间，但距点 X-1 的距离为 v%，距点 X+1 的距离为 (100-v)%，因此您可以相应地缩放找到的切线。