javascript - 相互连接的曲线

Question

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

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

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

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

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

score 1 · Accepted Answer

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

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

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

然后做数学:)

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

1 回答 1