5

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

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

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

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

小路

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

4

1 回答 1

1

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

http://www.blackpawn.com/texts/splines/

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

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

然后做数学:)

http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves

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

于 2013-03-27T22:50:14.533 回答