Jetpack Compose Box中图片水平移动时偏移缩放异常问题

我用Kotlin和Jetpack Compose开发Android应用，支持用户上传图片、拖拽（含双指缩放），并获取触摸点像素颜色。但在Box组件内水平移动图片时，发现偏移值offset.x - topLeftX和图片实际移动幅度不成正比，仅水平移动时这个数值也没法保持恒定。

相关代码如下：

Box(
            contentAlignment = Alignment.TopCenter,
            modifier = Modifier.fillMaxSize()
                .padding(start = Dp(10.0F), top = Dp(60F), end = Dp(10F), bottom = Dp(10F))
                .border(BorderStroke(2.dp, Color.Black)) // Creates a border
                .clip(RoundedCornerShape(10.dp)) // Clips content to the shape
                .pointerInput(Unit) {
                    detectTransformGestures { centroid, pan, zoom, rotation ->
                        offsetX += pan.x
                        offsetY += pan.y

                        topLeftCorner = Pair(offsetX, offsetY)

                        Log.d("Zoom", zoom.toString())
                        Log.d("Coordinates", "Top Left Corner: $topLeftCorner")
                    }
                }
                .pointerInput(Unit) {
                    detectTapGestures(onLongPress = { offset ->
                        touchLocation = Pair(offset.x, offset.y)
                        val topLeftX = topLeftCorner?.first ?: 0f
                        val topLeftY = topLeftCorner?.second ?: 0f

                        val relativeX = offset.x
                        val relativeY = offset.y

                        bitmap?.let {bitmap ->
                            val bitmapX = (offset.x / bitmap.width * bitmap.width).toInt()
                            val bitmapY = (offset.y / bitmap.height * bitmap.height).toInt()

                            if(bitmapX > 0 && bitmapY > 0){
                                var pixelColor = bitmap.getPixel(bitmapX, bitmapY)
                                pointColor = bitmap.getPixel(bitmapX, bitmapY).toComposeColor()
                                val hexColor = String.format("#%06X", (0xFFFFFF and pixelColor))
                                Log.d("ColorPicker", "Picked color: $hexColor")
                                Log.d("Coordinates", "Top Left Corner FromBoxOffsetToLeftCorner: $topLeftCorner")

                                Log.d("Coordinates", "Top Left Corner Offset: $touchLocation")
                                Log.d("Coordinates", "offset.x - topLeftX: ${(offset.x - topLeftX).toString()}")
                                val width = size.width
                                val bitmapWidth = bitmap.width
                                Log.d("Coordinates", "Size.width: $width; bitmap.width: $bitmapWidth")
                                pickedColor = hexColor
                                showDialog = true
                            }
                            Log.d("Coordinates", "Touch LOCATION: $bitmapX; $bitmapY")

                        }

                    })
                }
        ){
            bitmap?.let { bitmap ->
                Image(
                    bitmap = bitmap.asImageBitmap(),
                    contentDescription = "Picked Image",
                    modifier = Modifier
                        .fillMaxWidth()


                        .scale(scale)
                        .rotate(rotationState)
                        .absoluteOffset(x = Dp(offsetX), y = Dp(offsetY)),
                    contentScale = ContentScale.FillBounds
                )
            }

1. 未考虑缩放对偏移的影响 #

当前直接累加pan.x/pan.y到offsetX/offsetY，但detectTransformGestures返回的pan值是基于当前缩放后的坐标系，忽略缩放因子会导致偏移和实际移动幅度脱节。正确做法是将pan值除以缩放因子后再更新偏移：

offsetX += pan.x / scale
offsetY += pan.y / scale

2. 触摸点转位图坐标逻辑完全错误 #

你写的(offset.x / bitmap.width * bitmap.width)等价于offset.x，完全没考虑图片的缩放、偏移和布局约束。正确转换步骤：

1. 计算触摸点相对于Image组件的坐标（移除Box内偏移，抵消缩放影响）
2. 结合Image显示尺寸和原始位图尺寸的比例，转换为像素坐标

修正后的触摸点转换代码示例：

bitmap?.let { bitmap ->
    // 获取Image在Box中的实际显示尺寸（含缩放）
    val imageDisplayWidth = size.width * scale
    val imageDisplayHeight = (size.width * bitmap.height / bitmap.width) * scale

    // 计算触摸点相对于Image左上角的坐标（消除偏移和缩放的影响）
    val relativeToImageX = (offset.x - offsetX) / scale
    val relativeToImageY = (offset.y - offsetY) / scale

    // 转换为位图的像素坐标
    val bitmapX = (relativeToImageX / imageDisplayWidth * bitmap.width).toInt()
    val bitmapY = (relativeToImageY / imageDisplayHeight * bitmap.height).toInt()

    if (bitmapX in 0 until bitmap.width && bitmapY in 0 until bitmap.height) {
        var pixelColor = bitmap.getPixel(bitmapX, bitmapY)
        pointColor = pixelColor.toComposeColor()
        val hexColor = String.format("#%06X", (0xFFFFFF and pixelColor))
        pickedColor = hexColor
        showDialog = true
    }
}

3. 多个pointerInput的手势冲突 #

给Box添加两个独立的pointerInput会导致手势识别冲突，建议合并到同一个pointerInput中处理：

.pointerInput(Unit) {
    awaitPointerEventScope {
        while (true) {
            // 处理变换手势
            detectTransformGestures { centroid, pan, zoom, rotation ->
                offsetX += pan.x / scale
                offsetY += pan.y / scale
                topLeftCorner = Pair(offsetX, offsetY)
                // 处理缩放、旋转逻辑...
            }
            // 处理长按手势
            detectTapGestures(onLongPress = { offset ->
                // 颜色拾取逻辑...
            })
        }
    }
}

4. absoluteOffset的单位混乱 #

offsetX是像素单位（来自pan.x），但absoluteOffset接收的是Dp参数，直接转换会导致偏移计算错误。应该用offset修饰符配合像素单位的Offset：

.modifier = Modifier
    .fillMaxWidth()
    .scale(scale)
    .rotate(rotationState)
    .offset { Offset(offsetX, offsetY) } // 使用像素单位的Offset

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