如何在Jetpack Compose中为图片平移手势设置边界限制

需求可实现，核心逻辑是在手势更新位移、缩放值后对偏移量做边界限制 #

实现思路 #

• 首先获取图片容器的尺寸、原始位图的宽高参数
• 每次手势触发后先计算缩放后的图片总尺寸
• 根据缩放后图片尺寸和容器尺寸的差值，计算出X、Y轴的合法偏移范围，将偏移量限制在该范围内即可保证图片不会超出原始边界

修改后完整代码 #

@Composable
fun ZoomableImage() {
    val bitmapBytes = viewModel.page.observeAsState()
    val bitmap = bitmapBytes.value?.let {
        BitmapFactory.decodeByteArray(
            bitmapBytes.value, 0,
            it.size
        )
    }
    if (bitmap != null) {
        var scale by remember { mutableStateOf(1f) }
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }
        // 记录容器尺寸
        var containerWidth by remember { mutableStateOf(0) }
        var containerHeight by remember { mutableStateOf(0) }

        Image(
            modifier = Modifier
                .fillMaxSize()
                .onSizeChanged { 
                    containerWidth = it.width
                    containerHeight = it.height
                }
                .scale(scale)
                .absoluteOffset {
                    IntOffset(offsetX.roundToInt(), offsetY.roundToInt())
                }
                .pointerInput(Unit) {
                    detectTransformGestures(
                        onGesture = { _, pan, gestureZoom, _ ->
                            // 先计算新的缩放值，限制最小缩放为原始大小
                            val newScale = (scale * gestureZoom).coerceAtLeast(1f)
                            // 先计算临时偏移量
                            val tempOffsetX = offsetX + pan.x
                            val tempOffsetY = offsetY + pan.y
                            
                            // 计算缩放后图片的宽高
                            val scaledBitmapWidth = bitmap.width * newScale
                            val scaledBitmapHeight = bitmap.height * newScale
                            
                            // 计算X轴合法偏移范围：如果缩放后宽度不超过容器，只能偏移0
                            val maxOffsetX = if (scaledBitmapWidth <= containerWidth) {
                                0f
                            } else {
                                (scaledBitmapWidth - containerWidth) / 2
                            }
                            // 计算Y轴合法偏移范围
                            val maxOffsetY = if (scaledBitmapHeight <= containerHeight) {
                                0f
                            } else {
                                (scaledBitmapHeight - containerHeight) / 2
                            }
                            
                            // 赋值并限制偏移范围
                            scale = newScale
                            offsetX = tempOffsetX.coerceIn(-maxOffsetX, maxOffsetX)
                            offsetY = tempOffsetY.coerceIn(-maxOffsetY, maxOffsetY)
                        }
                    )
                },
            bitmap = bitmap.asImageBitmap(),
            contentDescription = null
        )
    }
}

注意事项 #

• 代码中通过coerceAtLeast(1f)限制了最小缩放比例为原始大小，避免缩小后出现空白区域
• 每次手势触发都会重新计算合法偏移区间，不管是缩放还是平移操作都会同步校正偏移量，避免缩放后图片超出边界
• 当图片缩放后的尺寸小于等于容器尺寸时，偏移量会被强制置为0，禁止平移
• 如果实测平移速度和手势移动速度不匹配，可以将pan.x改为pan.x / scale、pan.y改为pan.y / scale适配即可

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