SVG曲线通过预定点

Question

我是SVG的初学者。

我需要一条通过点列表的SVG曲线。它是一个用C ++计算的数学函数，输出结果应该写在SVG文件中。我的问题是SVG中的path标记没有通过所有点。相反，它会在中间跳过其中一些而只是倾向于它们。 SVG是否有任何设施可以通过整个点传递曲线并以自动方式适当地弯曲曲线？

<svg height="400" width="450">
  <path d="M 80 90 C 190 40, 300 60, 380 160" stroke="blue" stroke-width="5" fill="none" />
  <path d="M 80 90 L 190 40, 300 60, 380 160" stroke="green" stroke-width="1" fill="none"/>
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointC" cx="80" cy="90" r="3" stroke="black"/>
    <circle id="pointA" cx="190" cy="40" r="3" stroke="green"/>
    <circle id="pointC" cx="300" cy="60" r="3" stroke="red"/>
    <circle id="pointB" cx="380" cy="160" r="3" stroke="blue"/>
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

Answer 1

SVG路径使用贝塞尔曲线

• 即近似而非插值，因此通常不会通过控制点

怎么做：

1. 使用插值三次曲线并将其转换为Bezier

   • 请看这里：Interpolation cubic to Bezier cubic（因为类似的原因需要这个）
   • 我使用特定的插值三次方连接 C1 （位置和一阶导数）
   • Bezier的翻译就在那里，你可以使用它
   • 只需转换控制点......
   • 不要忘记为整个贝塞尔路径设置3x倍数的第一个和最后一个控制点
   • 不是每个Bezier补丁!!!

2. 使用多行而不是单个Bezier

   • 这将是粗糙的波动（取决于线密度）
   • 只需插入足够的点并按行连接

3. 重复控制点

   • 如果你有多个控制点（3x），那么Bezier将经历这一点
   • 所以，如果你有曲线点：p0,p1,p2,p3,...
   • 然后从他们那里做多个beziers：
   • p0,p0,p0,p1
   • p0,p0,p1,p2
   • p0,p1,p2,p3
   • p1,p2,p3,p3
   • p2,p3,p3,p3
   • p3,p3,p3,p4
   • p3,p3,p4,p5
   • p3,p4,p5,p6
   • p4,p5,p6,p6
   • p5,p6,p6,p6，...
   • 这将通过点p0，p3，p6，...
   • 因此您仍需要评估非传递控制点以确保所需的连接性

Answer 2

如果需要绘制平滑曲线到多个点，请考虑使用Catmull Rom样条曲线或Overhauser样条曲线。两种算法都会产生一个三次样条曲线，在分段连接处具有C1连续性。此外，它们比实现C2 B样条插值更容易实现，因为后者要求您求解线性方程组。您还可以轻松地将Catmull Rom样条曲线或Overhauser样条曲线转换回Bezier曲面。

Answer 3

如果您只需要通过4个点绘制曲线，请查看at the solution in this topic并链接tinaja页面 如果必须绘制通过多个点的平滑曲线，请考虑构建插值三次样条（NR book, page 113），而不是transform these splines to Bezier form（将多项式更改为伯恩斯坦）