如何在圆周围的点上绘制平滑路径

Question

这可能是一个数学问题......我在圆轴上有一组点。我们称圆圈x和点y的半径。问题有两个：

1. 我想在所有点上划一条线。让我们假设它是一个正常的x / y图：我知道确切的坐标。现在如何在所有这些点之间创建平滑路径？
2. 这不是正常的x / y图。这是一个a / r图（角度/半径）。我想，可以应用1.的解决方案，但是我在哪里绘制那条线？ （我不确定它是一个/ r图表会让它变得更加困难。）

（我希望使用Javascript在<canvas>上创建此内容。我已为渴望设置了一些内容：http://jsfiddle.net/rudiedirkx/5LfdP/1/）

我正在寻找的是



缠绕一个圆圈，两端相遇（所以0％= 350和100％= 350）。

感觉就像立方bezier是必要的，以创建点之间的平滑路径，但这就是我得到的。 This is the bezier function I usually use.

我有意义吗？我找不到更好的照片。 （可能是因为我不知道它叫什么。）

编辑1：我尝试绘制它的样子：http://www.sketchtoy.com/26800595（忘记动画，这就是草图的工作原理）

编辑2：我使用quadraticCurveTo（）更新了我的fiddle demo，但这还不够好。我需要bezier曲线和两倍的曲线才能使曲线通过这些点。就像About Spline Interpolation一样，但希望更简单。

Answer 1

如果您有图形的函数表达式，则可以简单地绘制它，将坐标转换为具有圆形偏移的极坐标。将'x'视为你的角度（min_x为角度“0”，max_x为角度“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曲线没有，它们绕着除起点和终点之外的每个点，所以它们不适合你想要做的事情。