如何计算Bezier S曲线对，使它们之间的空间具有恒定的厚度？

Question

使用SVG和立方贝塞尔曲线，我试图生成各种厚度，宽度和高度的S曲线形状轮廓，例如：

我一直在弄清楚应该如何定位四个角节点中的每个角节点的Bezier手柄，以使由它们的中间区域形成的曲线具有恒定的厚度（或至少近似）。

我可以看到每个端部的内外手柄之间的水平距离取决于曲线的粗细和整体曲线的宽度和高度，但是我很难过尝试将它们全部链接在一起。

是否有一个公式可以为每个手柄提供水平位置？

（我正在使用d3js，所以如果有一个插件或功能我错过了会对此有所帮助，那就更好了。）

Answer 1

不幸的是，除非您的曲线具有均匀的曲率，否则您无法通过线性缩放原始曲线来获得固定距离偏移曲线。

为了得到Bezier的偏移曲线，你必须做一些微积分来弄清楚如何将曲线分成＆＃34; safe＆＃34; 可以通过缩放来偏移的片段，然后缩放每个片段。

关于http://pomax.github.io/bezierinfo/#offsetting的更多细节，但基本上你想要的是通常你有其他人为你实现的东西，因为它是一件苦差事才能做对。

Answer 2

实际上，您可以偏移一个三次贝塞尔曲线的控制多边形，以生成“偏移”曲线的控制多边形，该曲线仍然是一个三次贝塞尔曲线。

下图将清楚地说明“偏移控制多边形”的含义。给定由P0，P1，P2和P3定义的三次贝塞尔曲线，我们可以偏移3个无限线L01（由P0和P1定义），L12（由P1和P2定义）和L23（由P2和P3定义）。得到的线表示为L01 *，L12 *和L23 *。 L01 *和L12 *的交点为Q1，L12 *和L23 *的交点为Q2。 Q0和Q3将是P0和P3在L01 *和L23 *上的直接投影点。偏移曲线将是由Q0，Q1，Q2和Q3定义的三次贝塞尔曲线。

当然，以这种方式创建的“偏移”曲线不是精确的偏移，而只是近似值。但只要偏移距离不是太大而且你对准确性不太挑剔，结果通常就足够了。这种方法有两个优点（除了它的简单性）：

• 近似偏移曲线将遵循曲线起点和终点处的真实偏移曲线的切线方向。
  
• 如果您将相反方向的偏移曲线偏移相同的距离，您将返回原始的三次贝塞尔曲线。

Answer 3

我推荐FreeType的ftstroke模块中使用的Tiller-Hanson算法。它通常用于将零宽度线转换为具有一定有限宽度的笔划;您可以使用它创建两条包络线之一（原始线两侧各一条）来获得平行曲线。它处理由直线段和二次和三次Bézier样条组成的任何线。

有关详细信息，请参阅我对此问题的回答：How to get the outline of a stroke?。