如何在 Jetpack Compose 中对图像实现缩放和平移

Question

我有一个图像可组合项，我希望用户能够放大图像的一部分。例如，如果在图像的左下角捏合，则放大到左下角区域而不是图像的中心。并且当放大时，如果一个手指就可以在图像周围平移。

在我当前的代码中，我有放大和缩小逻辑，但无论图像在何处被捏合，它都默认位于图像的中心并且放大时没有平移图像的逻辑。

Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "some description here",
    modifier = Modifier
        .graphicsLayer(
            scaleX = scale.value,
            scaleY = scale.value
        )
        .pointerInput(Unit) {
            detectTransformGestures { _, _, zoom, _ ->
                scale.value = when {
                    scale.value < 0.5f -> 0.5f
                    scale.value > 3f -> 3f
                    else -> scale.value * zoom
                }
            }
        }
)

所以我想实现两件事：

能够在实际捏住的地方（不是图像的中心）进行缩放
放大时，可以在图像周围平移

我已经尝试从其他堆栈溢出答案中实施多种解决方案，但它们似乎不起作用。

Answer 1

目前无法使用 compose 做到这一点。

不过我建议您使用 TouchImageView 互操作或使用 AndroidView 可组合的类似方法。

Answer 2

允许平移的部分解决方案可以这样实现：

var zoom by remember { mutableStateOf(1f) }
var offsetX by remember { mutableStateOf(0f) }
var offsetY by remember { mutableStateOf(0f) }
val minScale = 0.5f
val maxScale = 3f
Image(
    painter = painterResource(id = R.drawable.sample_image),
    contentDescription = "some description here",
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .graphicsLayer(
            scaleX = zoom,
            scaleY = zoom,
            translationX = offsetX,
            translationY = offsetY,
        )
        .pointerInput(Unit) {
            detectTransformGestures(
                onGesture = { _, pan, gestureZoom, _ ->
                    zoom = (zoom * gestureZoom).coerceIn(minScale, maxScale)
                    if(zoom > 1) {
                        offsetX += pan.x * zoom
                        offsetY += pan.y * zoom
                    }else{
                        offsetX = 0f
                        offsetY = 0f
                    }
                }
            )
        }
        .fillMaxSize()
)

（灵感来自 ComposeZoomableImage）

如何在 Jetpack Compose 中对图像实现缩放和平移

How to implement zoom and pan on an Image in jetpack compose

android

android-jetpack-compose

android-jetpack-compose-scaffold