相互连接的曲线

Question

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

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

我想绘制一系列直线虚线路径,这些路径与简单的固定半径圆角相连.我一直在寻找斜率截距形式来计算直线上的点,但我对于计算(贝塞尔？)曲线上的点的方法感到有些困惑.

例如,我想在p1和p2以及p3和p4之间绘制曲线.尽管可怜的模型可能意味着我很高兴角落是一个固定的半径,例如10px

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

Answer 1

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

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

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

然后做数学题:)

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