如何在jetpack compose中实现图像的缩放和平移答案

【问题标题】：How to implement zoom and pan on an Image in jetpack compose如何在jetpack compose中实现图像的缩放和平移
【发布时间】：2021-09-30 05:28:05
【问题描述】：

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

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

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
                }
            }
        }
)

所以我想实现两件事：

能够在实际捏合的位置（不是图像的中心）进行缩放
放大时，可以平移图像

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

【问题讨论】：

随便用一个库

标签： android android-jetpack-compose android-jetpack-compose-scaffold

【解决方案1】：

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

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

【讨论】：

【解决方案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）

【讨论】：