Android Canvas绘制矩形：如何实现矩形间的间距与分隔线？

看起来你在做类似生命游戏的Canvas应用，对吧？要给这些单元格加上间距或者分隔线，有几种简单的方法可以实现，我给你详细说说：

方法1：缩小单元格尺寸，留出间距（利用背景色作为分隔） #

这种方法最简单，只需要调整单元格的绘制大小，让每个单元格之间留出空隙，空隙的颜色就是Canvas的背景色，看起来就像有分隔了。

首先定义一个间距常量（你可以根据需要调整数值）：

private static final int CELL_SPACING = 2; // 单位是像素

然后修改你的drawCells方法：

private void drawCells(Canvas canvas) {
    // 计算每个单元格实际绘制的宽度和高度（减去间距）
    int drawWidth = columnWidth - CELL_SPACING;
    int drawHeight = rowHeight - CELL_SPACING;
    // 计算偏移量，让单元格在网格格子里居中
    int spacingOffset = CELL_SPACING / 2;

    for (int i = 0; i < nbColumns; i++) {
        for (int j = 0; j < nbRows; j++) {
            Cell cell = world.get(i, j);
            // 调整矩形的四个顶点位置，留出间距
            r.set(
                (cell.x * columnWidth) + spacingOffset,
                (cell.y * rowHeight) + spacingOffset,
                (cell.x * columnWidth) + spacingOffset + drawWidth,
                (cell.y * rowHeight) + spacingOffset + drawHeight
            );
            p.setColor(cell.alive ? DEFAULT_ALIVE_COLOR : DEFAULT_DEAD_COLOR);
            canvas.drawRect(r, p);
        }
    }
}

这种方法的好处是不用额外绘制线条，性能更好，而且间距颜色和Canvas背景一致，风格统一。

方法2：绘制自定义分隔线（边框） #

如果你想让分隔线有自己的颜色（比如黑色边框），可以在绘制每个单元格之后，额外绘制边框线条。

修改drawCells方法如下：

private void drawCells(Canvas canvas) {
    // 创建一个专门用来画分隔线的画笔
    Paint linePaint = new Paint();
    linePaint.setColor(Color.BLACK); // 分隔线颜色，可自定义
    linePaint.setStrokeWidth(1); // 分隔线宽度，可自定义

    for (int i = 0; i < nbColumns; i++) {
        for (int j = 0; j < nbRows; j++) {
            Cell cell = world.get(i, j);
            // 先绘制单元格的填充色
            r.set(
                cell.x * columnWidth,
                cell.y * rowHeight,
                cell.x * columnWidth + columnWidth,
                cell.y * rowHeight + rowHeight
            );
            p.setColor(cell.alive ? DEFAULT_ALIVE_COLOR : DEFAULT_DEAD_COLOR);
            canvas.drawRect(r, p);

            // 绘制当前单元格的右边界和下边界（避免重复绘制左、上边界）
            canvas.drawLine(r.right, r.top, r.right, r.bottom, linePaint);
            canvas.drawLine(r.left, r.bottom, r.right, r.bottom, linePaint);
        }
    }

    // 最后补上最左边的竖线和最上边的横线，让整个网格完整
    canvas.drawLine(0, 0, 0, canvas.getHeight(), linePaint);
    canvas.drawLine(0, 0, canvas.getWidth(), 0, linePaint);
}

这种方法的优势是可以完全自定义分隔线的颜色、粗细，视觉效果更突出，但会多一些绘制操作，不过对于一般的网格大小来说，性能影响可以忽略。

小提示 #

如果你的columnWidth或rowHeight比较小，建议把CELL_SPACING设为1，避免单元格显示太小。另外，如果你用方法1，记得确保Canvas的背景色和单元格颜色有明显区分，这样间距才会看得出来。

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