画一个Android游戏的方格网格有困难。

Question

我希望这个显示为一个7x7的正方形网格在屏幕中央，但是你可以看到我的当前代码垂直线在正确的位置，但水平线不在。我相信这应该是个简单的修复，任何帮助将不胜感激 -

public class GameGrid extends View {

    Paint black = new Paint();

    public GameGrid(Context context) {
        super(context);

        black.setColor(Color.BLACK);
        black.setStrokeWidth(8);
    }

    @Override
    public void onDraw(Canvas canvas) {

        float startX;
        float stopX;
        float startY;
        float stopY;

        int width = canvas.getWidth();
        int height = canvas.getHeight();

        int gridSize = 7;
        int gridSpacing = width / gridSize;

        //Vertical Grid-lines
        for (int i = 0; i < gridSize; i++) {

            startX = width / 2 - height / 2;
            stopX = width / 2 + height / 2;

            startY = i*gridSpacing;
            stopY = i*gridSpacing;

            canvas.drawLine(startX, startY, stopX, stopY, black);

        }

        //Horizontal Grid-lines
        for (int i = 0; i < gridSize; i++) {

            startX = i*gridSpacing;
            stopX = i*gridSpacing;

            startY = height / 2 - width / 2;
            stopY = height / 2 + width / 2;

            canvas.drawLine(startX, startY, stopX, stopY, black);
        }
    }

当前网格状况图片

- JCH1530

Answer 1

你缺少偏移量（在两个轴上都是如此）。为什么不预先计算xOffset和yOffset，然后基于点(xOffset, yOffset)开始绘制呢？

像这样：

@Override
public void onDraw(Canvas canvas) {

    float startX;
    float stopX;
    float startY;
    float stopY;

    int width = canvas.getWidth();
    int height = canvas.getHeight();

    int gridSize = 7;
    int gridSpacing = Math.min(width, height) / gridSize;
    int boardSize = gridSize * gridSpacing;

    int xOffset = (width - boardSize)/2;
    int yOffset = (height - boardSize)/2; 

    //Vertical Grid-lines
    for (int i = 0; i < gridSize; i++) {

        startX = xOffset + i*gridSpacing;
        startY = yOffset;

        stopX = startX;
        stopY = startY + boardSize;

        canvas.drawLine(startX, startY, stopX, stopY, black);

    }

    //Horizontal Grid-lines
    for (int i = 0; i < gridSize; i++) {

        startX = xOffset;
        startY = yOffset + i*gridSpacing;

        stopX = startX + boardSize;
        stopY = startY;

        canvas.drawLine(startX, startY, stopX, stopY, black);
    }
}

如果您想确保内容始终居中（例如在横向排列时），您应该设置以下内容：

int gridSpacing = Math.min(width, height) / gridSize;

- leobelizquierdo

---

谢谢你的回答，我已经尝试将你的代码应用到我的项目中，现在水平线似乎已经正确地对齐了垂直线下方的位置，但是只有一小部分可见，这表明它们可能被绘制到屏幕左侧的边缘之外，或者它们显示正确，但只有几个像素长。 - JCH1530

抱歉，我已经修复了。之前在 stopX 中使用了 gridSize 而不是 boardSize。现在应该可以正常工作了。 - leobelizquierdo

非常感谢，现在唯一需要的是在底部添加一条额外的水平线来关闭网格，但我相信我可以解决这个问题。 - JCH1530

Answer 2

我猜问题在于画布不是正方形？高度大于宽度。

因此，在垂直网格线中

startX = width / 2 - height / 2;

给出负数并将起点放到屏幕左侧。看起来不错，但长度不正确。

对于水平网格线：

 startY = height / 2 - width / 2;

这是一个正数，且您从屏幕的中间开始。同样，endY 值会超过一定量（请注意水平网格线比垂直网格线更长，并向下偏移）。

也许可以尝试

//Horizontal Y vals
startY = 0;
stopY   = height;

- Mark_Anderson

---

谢谢，不过这只会在屏幕左上角向下创建一条对角线。 - JCH1530

抱歉，我修正了一个拼写错误：将endY更改为stopY。对角线也意味着您进行了其他编辑，更改了X值……？无论如何，我会接受并使用@leobelizquierdo的解决方案。它比我的好得多，使整个代码更加优雅和高效。 - Mark_Anderson