javascript - 如何在 SVG 中计算法国曲线？

Question

这看起来很简单，但我无法理解它。我有两点需要使用法式曲线连接。我使用 SVG 用纯 JavaScript 制作了一个示例，所以一个解决方案会很棒，尽管我也欢迎某种基于公式的方法可以翻译成其他语言。

示例代码托管在这里：https ://jsfiddle.net/se6kf95u/

const nameSpace = 'http://www.w3.org/2000/svg';

// Setup SVG Container
var svg = document.createElementNS(nameSpace, 'svg')
svg.setAttributeNS(null, 'viewBox', '0 0 400 200')
document.body.appendChild(svg);

// Draw Example 1
const line1 = document.createElementNS(nameSpace, 'line');
line1.setAttributeNS(null, 'x1','50');
line1.setAttributeNS(null, 'y1','100');
line1.setAttributeNS(null, 'x2','100');
line1.setAttributeNS(null, 'y2','50');
line1.setAttributeNS(null, 'stroke', 'black');
svg.appendChild(line1);

// Draw Example 2
const line2 = document.createElementNS(nameSpace, 'line');
line2.setAttributeNS(null, 'x1','50');
line2.setAttributeNS(null, 'y1','150');
line2.setAttributeNS(null, 'x2','200');
line2.setAttributeNS(null, 'y2','120');
line2.setAttributeNS(null, 'stroke', 'black');
svg.appendChild(line2);

这是我想要实现的一个糟糕的动画：

重要提示：关于曲线如何上升（线上方或线下方）的决定将手动做出，这不是自动决定。在我使用的示例中，如果有意义的话，A 会低于该线，B 会高于该线。我没有任何其他输入参数或信息。起点和终点的坐标，以及曲线是否超过或低于直线。

旁注：我使用了我在网上找到的放大效果不佳的法国曲线图像，不是 100% 确定下面的示例是像素正确的，可能有点偏离。

标签： javascriptmathsvggraphicsbezier