Question

我想创建一个划分为多个单元格的网格，这些单元格将包含图像，这些图像不会更改其尺寸，但会均匀地适合网格的每个单元格。我过去的尝试并没有实现这个概念，因为上一次尝试仅使用了应用于对象位置的矢量列表。我想知道您将如何在网格上实现这些单元，然后在每个单元中放置一个图像，以确保图像不适应单元的尺寸。

//Previous vector attempt

public int _screenHeight;
public int _screenWidth;

_screenWidth = GraphicsDevice.PresentationParameters.BackBufferWidth;
_screenHeight = GraphicsDevice.PresentationParameters.BackBufferHeight;

public List<Vector2> generateGrid(int _rows, int _cols)
    {
        // Example list
        List<Vector2> gridPoints = new List<Vector2>();

        int rows = _rows;
        int cols = _cols;

        int units_x = _screenWidth / rows;
        int units_y = _screenHeight / cols;

        for (int i = 0; i < _cols; i++) 
            for (int j = 0; j < _rows; j++)
                gridPoints.Add(new Vector2(0 + units_x * j, 0 + units_y * i));

        // returns the vector points
        return gridPoints;
    }

我目前的理论

创建一个单元格类，该类通过在draw事件中进行基本划分将两个矩形（单元格和图像）在定义的点嵌套在一起。

THEORY EXAMPLE

Answer 1

您上一次尝试的直觉（您的帖子中的直觉）与您想要实现的目标非常接近。您找到Vector2职位的逻辑是正确的。

由于已经有了网格点的坐标，因此只需将Texture2D放在每个网格点位置即可。

这样做，每个Texture2D的左上角都将在为其分配了网格的单元格的左上角。

您也不必担心Texture2D的大小调整以适合网格单元。每当您绘制它们时，都将使用您提供的图像文件的尺寸来绘制它们。

即如果您将153x45px图像分配给Texture2D，则在绘制时其大小仍为153x45像素。（也就是说，除非您更改了其scale，但我假设您没有这样做。）

如果要使Texture2D在网格单元的左上角不是，则必须将(X,Y)坐标偏移<您想要移动的像素

。

例如将Texture2D向下移动15个像素，向右移动30个像素，将需要您将其(X + 15, Y + 30)的原始位置更新。

Answer 2

一旦有了网格，您只需要将内部图像放置在单元格的中心即可。最简单的方法是使用偏移量。根据您的示例图片，您需要将其沿X轴居中。

这意味着您的X偏移为

int offsetX = (cellWidth - imageWidth) / 2;

从那里可以遍历网格，使用网格点（假设点0,0是左上角）放置图像。

Vector2 imagePoition = new Vector2(gridPoints[i].X + offsetX, gridPoints[i].Y);

如果需要沿Y轴对齐，请与像元高度和图像高度相同

Monogame C＃：如何创建一个固定的图像网格，使其均匀地适合每个单元格？

2 个答案: