首页 > 解决方案 > 将向量四舍五入以保持在一个圆圈内的问题?

问题描述

我正在从一个圆圈创建一个基于图块的地图。我想在圆的边缘添加一些特征,我目前正在通过比较向量的长度并检查它是否小于圆的半径来做到这一点。

然而,当从任何特定的对角线方向四舍五入距离时,似乎存在一个小错误。

if(distance < size)我已经在提供的图像上标记了代码为表达式输出的每个位置。绿点是预期的点,我考虑的是圆的边缘 - 红色的点是预期之外的额外点。

我最好的猜测是,这是一个受对角线长度影响的舍入误差。我已经尝试通过使用 Math.Floor 和 Math.Ceiling 进行舍入来更改“距离”变量的舍入方式,但遗憾的是结果没有变化。

    // i, j is any particular position on the map, can be negative or positive
    var x = i;
    var y = j;

    var v = new Vector2(x, y);
    var distance = (int)v.Length();
    var size = diameter / 2;

    if (distance <= size)
    {
      if (distance == size)
      {
         // green point on image
      }
      else
      {
         // inside the green circle on image
      }
     }

预期的结果是它只将所提供图像上的绿色像素作为正确的边缘。

带有错误简要概述的图像:https://i.imgur.com/BkUrWsE.png

带有正在运行的错误的图像:https://imgur.com/a/grKNBuv

标签: c#mathvectorgeometrymonogame

解决方案


我认为您反对沿边缘的双像素。

TL;DR:使用圆方程直接从每个八分圆中的 x(或 x 从 y)计算 y,以防止每行/列中出现多个像素。

我认为您的期望来自于习惯于看到中点圆算法的光栅化技术,该算法设法绘制没有令人反感的双像素的圆。

它通过将圆分成称为八分圆的 8 个部分来做到这一点。在第一象限(其中 x 和 y 都是正数)中,它分为 x > y 的第一个八分圆和 y < x 的第二个八分圆。在这里:一张图片胜过一千个字。 这张图片摘自维基百科

https://en.wikipedia.org/wiki/Midpoint_circle_algorithm#/media/File:Bresenham_circle.svg

我不会详细介绍,但我们只是说,在第一个八分圆中,每行只有一个像素,而在第二个八分圆中,每列只有一个像素。 我认为这是你的目标——达到同样的目标。

要在第二个八分圆中执行此操作,对于给定的列 x,您可以计算给定半径的圆的唯一对应 y。当然,您需要一个if条件来处理各种八分圆的情况,因为在第一个八分圆中,您需要为给定的 y 计算唯一的 x。(圆是高度对称的;稍微巧妙地处理所有情况并不算太糟糕。我将在下面的代码中尝试以一种简单的方式这样做。)

基本上,如果您可以对网格中的每个 dx,dy 对执行检查。如果 dy 与您从圆方程计算的 dy 相同,那么您可以点亮它。您只需要注意您所在的八分圆,以确保您不会在每行/列中获得多个像素。

在深入研究实施之前的最后一件事。您可能需要一个以 ~.5 结尾的半径,因为具有精确整数直径的圆在顶端有一个杂散像素,这很难看。您可以使用 ~.5 半径,或将中心放置在 ~.5 坐标处——两者之一;由你决定。在我的示例中,我将半径添加 0.5。你可以随心所欲地计算出这些小细节。

这是代码:

static void DrawCircle(int[,] grid, int cx, int cy, int radius) {
    int width = grid.GetLength(0);
    int height = grid.GetLength(1);
    int radius_squared = (int)(((double)radius + 0.5)*((double)radius + 0.5));
    for (int y = 0; y < height; ++y)
    {
        for (int x = 0; x < width; ++x)
        {
            int dx = x - cx;
            int dy = y - cy;

            // These three conditions transform all 8 octants into the same octant,
            // where dx and dy are positive and dx <= dy, so they can all be
            // handled with the same calculation.
            if (dx < 0) dx = -dx;
            if (dy < 0) dy = -dy;
            if (dy < dx)
            {
                // swap dx and dy
                int temp = dx;
                dx = dy;
                dy = temp;
            }

            // This now represents "2nd octant" in the picture I provided.
            // directly compute the dy value of the edge of the circle given dx.
            int edgedy = (int)Math.Sqrt(radius_squared - dx * dx);

            // Put a 1 in the cell if it's on the edge, else put a 0.
            // You can modify this as needed, of course.
            grid[x, y] = (dy == edgedy) ? 1 : 0;
        }
    }
}

结果:

在此处输入图像描述


推荐阅读