相互连接的曲线答案

【问题标题】：Interconnected curved lines相互连接的曲线
【发布时间】：2013-03-27 22:13:30
【问题描述】：

给定一系列 JSON 坐标，通常采用以下格式：

{from: {x:0, y:0}, to: {x:0, y:10}, ...}

我想绘制一系列直的虚线路径，这些路径与简单的固定半径圆角相连。我一直在查看 Slope Intercept Form 来计算沿直线的点，但我对沿（Bezier？）曲线计算点的方法有点困惑。

例如我想在 p1 和 p2 以及 p3 和 p4 之间绘制曲线。尽管糟糕的模型可能暗示我很高兴角落是固定半径，例如10像素

我想抽象出绘图逻辑，因此正在寻找一种通用的方法来返回一个 JavaScript 点数组，然后我可以通过多种方式渲染该数组（因此我避免使用 SVG、Canvas 等提供的任何内置函数)。

【问题讨论】：

【解决方案1】：

你想要的是三次贝塞尔曲线。

查看此页面上的第一个小程序。如果 A 是 p1，D 是 p2，方向 A-B 是线 1 的角度，方向 C-D 是线 2 的角度，您可以看到这如何为您提供所需的属性 - 它从角度 1 开始，在角度 2 结束，并与点。

因此，要获得 C 点和 D 点，一种方法是获取线段 1，复制它，将其从 p1 开始放置 - 并说新线的结束位置是 B，与 line 类似D 的段 2 和 p2。（你可以做一些事情，比如有一个因子乘以复制的线段的距离，以使曲线或多或少伸出......等等）

那就算算吧：）

一旦你有了曲线方程，以所需精度的 delta t 逐步通过它（例如，每 t 的 0.1，每 0.01...），并将曲线上的每一对点作为一条线吐出段。

【讨论】：

您的链接显示的是一个实变量函数的插值，而不是曲线的插值。（分母中有（x2-x1））
@Ivan Kuckir 你是对的，我很尴尬。我会寻找更好的算法。
顺便说一句。我知道，因为我正在实现它 :) blog.ivank.net/interpolation-with-cubic-splines.html Photoshop 曲线使用该插值。
@Ivan Kuckir 我用正确的曲线编辑了我的答案
@OpherV P 是 (Px,Py) 的元组。这意味着您对所有 xs 然后对所有 ys 做方程（因为至少对于这个方程，它们不会相互交互）。摆弄小程序证实了这一点 - 仅在 x 上移动任何点永远不会改变 y 位置，反之亦然。