Jetpack Compose中如何实现Image组件捏合点缩放与单指平移功能

你可以通过新增偏移状态、利用detectTransformGestures返回的手势中心点和拖拽偏移量实现需求，完整代码如下：

// 定义状态
val scale = remember { mutableStateOf(1f) }
val offsetX = remember { mutableStateOf(0f) }
val offsetY = remember { mutableStateOf(0f) }

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "some description here",
    modifier = Modifier
        .graphicsLayer(
            scaleX = scale.value,
            scaleY = scale.value,
            // 新增平移属性
            translationX = offsetX.value,
            translationY = offsetY.value
        )
        .pointerInput(Unit) {
            detectTransformGestures { centroid, pan, zoom, _ ->
                val oldScale = scale.value
                // 限制缩放范围0.5~3倍
                val newScale = (oldScale * zoom).coerceIn(0.5f, 3f)

                // 处理锚点缩放逻辑
                if (newScale != oldScale) {
                    // 根据捏合中心点计算偏移补偿，保证捏合位置始终对准手指
                    offsetX.value -= centroid.x * (newScale - oldScale)
                    offsetY.value -= centroid.y * (newScale - oldScale)
                    scale.value = newScale
                }

                // 处理平移逻辑
                if (scale.value > 1f) {
                    // 计算最大偏移量，避免图片拖出可视区域
                    val maxOffsetX = (size.width * (scale.value - 1)) / 2
                    val maxOffsetY = (size.height * (scale.value - 1)) / 2
                    // 应用拖拽偏移并限制边界
                    offsetX.value = (offsetX.value + pan.x).coerceIn(-maxOffsetX, maxOffsetX)
                    offsetY.value = (offsetY.value + pan.y).coerceIn(-maxOffsetY, maxOffsetY)
                } else {
                    // 恢复原始大小时自动重置偏移
                    offsetX.value = 0f
                    offsetY.value = 0f
                }
            }
        }
)

关键逻辑说明 #

• 锚点缩放实现：detectTransformGestures返回的centroid参数是当前捏合手势的中心点坐标（相对于Image组件自身坐标系），缩放时通过该点计算偏移补偿，保证捏合位置在缩放前后始终和用户手指位置重合，不会固定以图片中心为锚点。
• 平移实现：detectTransformGestures原生支持同时识别捏合和单指拖拽手势，返回的pan参数就是单指拖拽的偏移量，直接更新偏移状态即可实现平移，同时增加了边界限制避免图片被拖出可视区域。

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