Jetpack Compose自定义GraphView粗线对齐5的倍数问题求助

问题根源 #

缩放后粗网格线偏离5的倍数，核心原因是计算网格线起始位置时未强制对齐5的整数倍基准，而是直接基于当前可视范围的边界值累加间隔，浮点数精度误差或边界偏移被放大后，最终出现非整5的线位。

修复思路 #

无论缩放级别如何，强制粗网格线的坐标为5 * k（k为整数），具体步骤：

1. 固定粗网格线的间隔为5（或根据缩放级别动态调整为5的整数倍，如10、15等，但必须是5的倍数）；
2. 计算当前可视范围内第一条符合5的整数倍的粗线坐标；
3. 以此为起点，按固定间隔累加，绘制所有在可视范围内的粗网格线。

代码修改示例 #

假设你原来的粗网格线绘制逻辑类似下方代码：

// 原错误代码示例
val xBounds = remember { Bounds(min = -10f, max = 10f) } // 缩放后会动态变化
val coarseStep = 5f

Canvas(modifier = Modifier.fillMaxSize()) {
    var currentX = xBounds.min
    while (currentX <= xBounds.max) {
        drawLine(
            color = Color.DarkGray,
            start = Offset(currentX, yBounds.min),
            end = Offset(currentX, yBounds.max),
            strokeWidth = 2.dp.toPx()
        )
        currentX += coarseStep
    }
}

修改后的正确代码：

val xBounds = remember { Bounds(min = -10f, max = 10f) } // 动态更新的可视范围
val coarseStep = 5f // 固定为5，或根据缩放级别调整为5的整数倍

Canvas(modifier = Modifier.fillMaxSize()) {
    // 计算可视范围内第一个 >= xBounds.min 的5的倍数坐标
    val firstCoarseX = ceil(xBounds.min / coarseStep) * coarseStep
    // 如果需要包含左侧超出可视范围但最近的5的倍数，改用floor：
    // val firstCoarseX = floor(xBounds.min / coarseStep) * coarseStep
    
    var currentX = firstCoarseX
    // 处理浮点数精度问题，避免因误差导致多画/漏画
    while (currentX <= xBounds.max + 1e-6f) {
        drawLine(
            color = Color.DarkGray,
            start = Offset(currentX, yBounds.min),
            end = Offset(currentX, yBounds.max),
            strokeWidth = 2.dp.toPx()
        )
        currentX += coarseStep
    }
}

额外优化点 #

如果需要根据缩放级别动态调整粗网格间隔（比如放大后用10，缩小后用5），可以基于当前缩放比例计算间隔，但必须保证是5的倍数：

// 根据缩放比例动态计算粗间隔，始终为5的整数倍
val scale = remember { mutableStateOf(1f) } // 当前缩放比例
val coarseStep = remember(scale.value) {
    val baseStep = 5f
    val exponent = floor(log2(scale.value)).toInt()
    baseStep * (2f).pow(exponent)
}

这样无论缩放多少倍，粗网格线始终对齐5、10、15等5的整数倍位置，不会出现偏移。

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