2

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

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

（我想<canvas>用 Javascript 创建这个。我已经为急切的人设置了一些东西：http: //jsfiddle.net/rudiedirkx/5LfdP/1/）

我正在寻找的是

平滑线图

围绕一个圆圈，结束会议（所以 0% = 350 和 100% = 350）。

感觉就像三次贝塞尔曲线对于创建点之间的平滑路径是必要的，但这就是我所得到的。这是我通常使用的贝塞尔函数。

我说得有道理吗？我找不到更好的图片了。（可能是因为我不知道它叫什么。）

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

编辑 2：我已经使用 quadraticCurveTo() 更新了我的小提琴演示，但这还不够好。我需要贝塞尔曲线和两倍的曲线才能使曲线通过点。就像关于样条插值，但希望更简单。

4

1 回答 1

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 曲线不会t，它们绕过除起点和终点之外的每个点，因此它们不适合您想做的事情。

于 2013-03-29T16:29:44.620 回答