Jetpack Compose：捏合缩放后获取detectTapGestures正确偏移量

问题场景 #

在Jetpack Compose中使用detectTapGestures获取图片点击偏移量时，图片经过缩放和平移后，点击坐标计算出现偏差。未缩放时通过myOffset.x - offset.x能得到正确值，但尝试myOffset.x - offset.x / scale处理缩放场景无效。

解决方案 #

要准确计算缩放平移后点击点在原始图片上的偏移量，需要结合平移偏移、缩放比例和图片显示与原始尺寸的比例三个因素，步骤如下：

1. 添加状态记录图片的显示尺寸
   因为使用了ContentScale.FillWidth，图片显示尺寸会随父容器变化，需要先捕获这个尺寸：

var displaySize by remember { mutableStateOf(Size.Zero) }

2. 给Image添加尺寸监听
   修改Image的Modifier，记录实际显示尺寸：

Image(
    contentDescription = null,
    modifier = Modifier.fillMaxWidth()
        .onSizeChanged { displaySize = it }
        .graphicsLayer(
            scaleX = scale, scaleY = scale,
            translationX = offset.x, translationY = offset.y,
        ),
    contentScale = ContentScale.FillWidth,
    painter = customPainter
)

3. 修正点击坐标计算逻辑
   在detectTapGestures中按以下顺序计算：

• 先消除平移偏移的影响
• 再除以缩放比例，得到未缩放时的显示坐标
• 最后根据显示尺寸与原始尺寸的比例，换算成原始图片上的坐标

完整代码：

detectTapGestures { myOffset ->
    // 1. 移除平移偏移的影响
    val adjustedX = myOffset.x - offset.x
    val adjustedY = myOffset.y - offset.y

    // 2. 移除缩放的影响，得到图片显示区域内的原始位置（未缩放）
    val scaledX = adjustedX / scale
    val scaledY = adjustedY / scale

    // 3. 换算为原始图片的坐标（处理ContentScale.FillWidth的比例缩放）
    val contentScaleRatio = if (displaySize.width > 0) {
        displaySize.width / customPainter.painterSize.width
    } else 1f

    val originalX = scaledX / contentScaleRatio
    val originalY = scaledY / contentScaleRatio

    // 可选：确保坐标在原始图片范围内
    val clampedX = originalX.coerceIn(0f, customPainter.painterSize.width)
    val clampedY = originalY.coerceIn(0f, customPainter.painterSize.height)

    Timber.e("原始图片点击坐标 X: $clampedX, Y: $clampedY")
    onClick(Offset(clampedX, clampedY))
}

为什么之前的方法无效 #

之前的计算只考虑了平移偏移除以缩放比例，但忽略了：

• 平移偏移是应用在已缩放的图片上的，应该先减去平移，再除以缩放比例
• ContentScale.FillWidth会让图片按宽度比例缩放显示，需要额外换算显示坐标到原始图片坐标

内容的提问来源于stack exchange，提问作者Dr. ShRo0mH3Ad