Pygame网格绘制疑难：如何消除内部重叠粗边框？

你当前的代码循环绘制每个网格单元的3px边框，相邻单元的边框会重叠，导致内部线条变成6px粗，这就是看起来不协调的原因。原生Pygame可以通过调整绘制逻辑解决这个问题，下面提供两种实用方案：

方案一：先画外边框，再画内部分隔线 #

这种方法最直观，先绘制整个网格的外边框，再单独画内部的横竖分隔线，每条线只画一次，完全避免重叠：

def drawGrid(gridSize):
    grid_width = squareSize * gridSize
    grid_height = squareSize * gridSize
    # 计算网格整体的居中位置
    grid_x = int((700 / 2) - grid_width / 2)
    grid_y = int((400 / 2) - grid_height / 2 + 35)
    
    # 绘制网格外边框
    pygame.draw.rect(screen, outlineColor, (grid_x, grid_y, grid_width, grid_height), 3)
    
    # 绘制内部竖分隔线
    for x in range(grid_x + squareSize, grid_x + grid_width, squareSize):
        pygame.draw.line(screen, outlineColor, (x, grid_y), (x, grid_y + grid_height), 3)
    
    # 绘制内部横分隔线
    for y in range(grid_y + squareSize, grid_y + grid_height, squareSize):
        pygame.draw.line(screen, outlineColor, (grid_x, y), (grid_x + grid_width, y), 3)

方案二：调整单元边框的绘制范围 #

只给每个单元绘制不与相邻单元重叠的边框，比如每个单元只画右边和下边的边框，再单独补充网格的左、上外边框：

def drawGrid(gridSize):
    border_width = 3
    grid_x = int((700 / 2) - (squareSize * gridSize) / 2)
    grid_y = int((400 / 2) - (squareSize * gridSize) / 2 + 35)
    
    for x_idx in range(gridSize):
        for y_idx in range(gridSize):
            X = grid_x + x_idx * squareSize
            Y = grid_y + y_idx * squareSize
            rect = pygame.Rect(X, Y, squareSize, squareSize)
            
            # 第一列的单元画左边框
            if x_idx == 0:
                pygame.draw.line(screen, outlineColor, (X, Y), (X, Y + squareSize), border_width)
            # 第一行的单元画上边框
            if y_idx == 0:
                pygame.draw.line(screen, outlineColor, (X, Y), (X + squareSize, Y), border_width)
            # 所有单元画右边框（包括最后一列，构成外边框右侧）
            pygame.draw.line(screen, outlineColor, (X + squareSize, Y), (X + squareSize, Y + squareSize), border_width)
            # 所有单元画下边框（包括最后一行，构成外边框下侧）
            pygame.draw.line(screen, outlineColor, (X, Y + squareSize), (X + squareSize, Y + squareSize), border_width)

原代码问题分析 #

你之前的代码中，每个网格单元都绘制完整的3px边框，相邻单元的边框会在交界处重叠（比如左边单元的右边框和右边单元的左边框叠在一起），视觉上就变成了6px粗的线条，这就是导致网格不协调的核心原因。

内容的提问来源于stack exchange，提问作者Gooberton