Canvas绘制矩形网格时点击横线获取索引结果错误如何解决？

我通过Canvas绘制了对应图形，为横向矩形（a1、a3、a5、a8、a10…）和纵向矩形（a2、a4、a6、a7…）分别设置了索引。预期点击a1返回(1, 2)，点击a3返回(2, 3)，但实际运行有两处不符合预期：

• 点击a8时返回(4, 5)，正确结果应为(5, 6)
• 点击编号15的元素时返回(7, 8)，正确结果应为(9, 10)

原代码如下：

public Integer getIndex(int x, int y){
        int count_horizontal = 0;
        int count_vertical = 0;
        for(int i = 0; i < Lines.size(); i++) {
            Lines line = Lines.get(i);
            if(line.horizontal) {
                count_horizontal ++;
                if(x >= line.x && x <= line.x + line_length &&
                        y >= line.y && y <= line.y) {
                    return count_horizontal;
                }
            } else {
                count_vertical++;
                if(x >= line.x && x <= line.x &&
                        y >= line.y && y <= line.y) {
                    return count_vertical;
                }
            }
        }
        return null;
    }

问题原因 #

1. 点击判定逻辑不合理：原代码对横向和纵向矩形的点击判定都只判断坐标是否等于线的x/y边界值，本质是只能命中线的像素边缘，没有覆盖矩形的完整可点击区域，会出现大量判定遗漏，导致索引计数累加次数少于实际序号，最终返回的索引值偏小。
2. 返回逻辑不符合需求：你预期返回的是(横向索引, 纵向索引)格式的二元组，原代码只要匹配到任意元素就直接返回单个索引值，完全没有实现预期的返回格式。
3. 计数逻辑依赖列表顺序：如果Lines列表不是严格按照你设定的元素序号顺序存储，计数结果就会和预期序号不匹配。

修复方案 #

首先确认你的矩形有预设的宽高参数，比如横向矩形高度为rectHeight，纵向矩形宽度为rectWidth，修复后的代码如下：

// 用int数组返回二元组，第一位是横向索引，第二位是纵向索引
public int[] getIndex(int x, int y){
    int count_horizontal = 0;
    int count_vertical = 0;
    Integer hitHorizontal = null;
    Integer hitVertical = null;
    for(int i = 0; i < Lines.size(); i++) {
        Lines line = Lines.get(i);
        if(line.horizontal) {
            count_horizontal ++;
            // 覆盖横向矩形的完整点击区域
            if(x >= line.x && x <= line.x + line_length &&
               y >= line.y && y <= line.y + rectHeight) {
                hitHorizontal = count_horizontal;
            }
        } else {
            count_vertical++;
            // 覆盖纵向矩形的完整点击区域
            if(x >= line.x && x <= line.x + rectWidth &&
               y >= line.y && y <= line.y + line_length) {
                hitVertical = count_vertical;
            }
        }
    }
    // 点击位置同时命中横向和纵向矩形时返回二元组
    if(hitHorizontal != null && hitVertical != null) {
        return new int[]{hitHorizontal, hitVertical};
    }
    // 未命中时返回空
    return null;
}

如果你的Lines列表存储顺序和元素序号不一致，可以直接给每个Lines对象预设index属性，点击命中时直接取对应的index值即可，不用通过遍历计数计算索引，避免顺序问题影响结果。

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