javascript - 如何绘制跨越圆周点的平滑路径

Question

这可能是一道数学题……我在圆轴上有一组点。我们称圆为 x，点的半径为 y。问题是双重的:

1. 我想要一条横跨所有点的平滑线。让我们假设它是一个正常的 x/y 图:我知道确切的坐标。现在我该如何在所有这些点之间创建一条平滑的路径？
2. 这不是正常的 x/y 图。这是一个 a/r 图( Angular/半径)。我想可以应用 1. 中的解决方案，但是我应该在哪里画那条线呢？ (我不确定它是一个 a/r 图表会使它变得更加困难。)

(我想用 Javascript 在 <canvas> 上创建它。我已经为渴望的人设置了一些东西:http://jsfiddle.net/rudiedirkx/5LfdP/1/)

我要找的是

围绕一个两端相交的圆圈(因此 0% = 350 和 100% = 350)。

感觉好像需要立方贝塞尔曲线才能在点之间创建平滑路径，但仅此而已。 This is the bezier function I usually use.

我说的有道理吗？我找不到更好的照片了。 (可能是因为我不知道它叫什么。)

编辑 1: 我尝试画出它的外观:http://www.sketchtoy.com/26800595 (忘记动画吧，sketchtoy 就是这样工作的)

编辑 2: 我已经更新了我的 fiddle demo使用 quadraticCurveTo()，但这还不够好。我需要贝塞尔曲线和两倍的曲线才能使曲线通过点。喜欢About Spline Interpolation但希望更简单。

Answer 1

如果您有图形的函数表达式，您可以简单地绘制它，将您的坐标转换为具有圆形偏移的极坐标。将“x”视为您的 Angular (min_x 为 Angular “0”，max_x 为 Angular “360”，或者对于计算机，为“2π”)，使用这些映射:

φ (the angle) = map x from interval (min_x,max_x) to interval (0,2π);
a (the amplitude) = map y from (min_y,max_y) to (0, max_distance);

然后您可以绘制函数的 x/y 坐标是:

nx = a * cos(φ);
ny = a * sin(φ);

对于图表绘制，我强烈建议您为您的值构建一个查找表，这样您就不必不断计算原始 x/y 值。如果您没有函数，只有一系列点，那么您实际上已经有了这个 LUT。

在转换您的 LUT x/y 坐标后，通过它们中的每一个绘制一条漂亮的曲线可能是 Catmull-Rom 样条曲线的工作，而不是 Bezier，因为 Catmull-Rom 样条曲线穿过您使用的每个点，而 Bezier曲线则不然，它们绕过除起点和终点以外的所有点，因此它们不适合您想要做的事情。