13

我试图弄清楚如何决定我需要多少个顶点才能使我的圆看起来尽可能平滑。

这是两个圆的示例,两个圆都有 24 个顶点: 在此处输入图像描述

如您所见,圆圈越大,隐藏直线所需的顶点就越多。

起初我认为边缘上的一条线的最小长度应该是 6px,但是当我增加圆的大小时,这种方法失败了:我得到了太多的顶点。我也考虑过计算角度,但我很快意识到角度在不同大小的圆上没有区别。我也检查了这个答案,但我不知道如何将其转换为代码(还有一些奇怪的东西:th使用自身来计算自身),我认为它甚至不起作用,因为作者使用的是从一个切片到圆中间的角度,如果圆变大,这个角度不会改变。

然后我意识到,也许解决方案是检查边缘两个顶点之间的角度,以这种方式:

在此处输入图像描述

如您所见,顶点越少,这些三角形的长度就越大。所以这必须是答案,我只是不知道如何使用这些信息计算顶点数。

4

4 回答 4

13

您链接到的答案实际上完全实现了您在问题末尾提出的想法。

您需要从该答案中获得的决定性公式是这个:

th = arccos(2 * (1 - e / r)^2 - 1)

这告诉您两个顶点之间的角度,其中r是圆的半径,e是您愿意容忍的最大误差,即多边形与圆的最大偏差 - 这是图表中标记的错误。例如,您可以选择设置e为 0.5 个像素。

因为th是以弧度为单位测量的,而 360 度(一个完整的圆)等于以2*pi弧度为单位,所以您需要的顶点数是

num_vertices = ceil(2*pi/th)
于 2012-08-02T09:18:59.867 回答
2

如果您想从圆心绘制多边形三角形,所需边数的公式为:

sides = PI / arccos(1 - error / radius)

其中error是多边形与圆的最大偏差,以像素radius为单位,也以像素表示。

错误0.33似乎产生的结果与理想的圆没有区别。错误绘制的圆圈0.5,在仔细检查时仍然显示出一些微妙可见的边之间的角度,特别是在小圆圈中可见。

当半径远小于误差时,此函数显然会失效,并且可能会产生NaN值。在这种情况下,您可能需要使用特殊情况(例如绘制 3 条边)。

下图显示了从函数获得的边数,错误设置为0.33

于 2020-01-02T19:17:24.800 回答
1

首先,如果您使用的是 OpenGL 或 DirectX,则可以通过使用三角形扇形结构来显着减少顶点数量。

至于顶点数量的问题,我会想象一个平滑的圆与圆周缩放所需的顶点数量。这与 r 成比例,所以我建议找到一个好的因素A,例如:

#vertices = A * r

于 2012-08-02T08:58:49.530 回答
0

在 24 个顶点的两种情况下,角度相同。

但圈越大,人眼就能更好地看到个别的直线。

所以你需要一些启发式来考虑

  • 曲线中两个连续线段之间的角度,以及

  • 大小,可能还有

  • 显示的缩放比例。

第三点很困难,因为人们通常不知道某些图形将显示的大小。例如,可以以任何尺寸显示 SVG 格式的图片。我认为最通用的解决方案是在渲染器中直接支持各种图形(贝塞尔线、圆等),然后用几个参数定义图形而不是点序列。或者,根据渲染器支持的某个图形来定义它,例如作为连接的贝塞尔曲线序列。这样,渲染器可以添加必要数量的点,使其看起来平滑美观。

但是,我猜您并没有创建渲染器,所以也许只有上面的前两点是相关的。

于 2012-08-02T09:01:38.867 回答