android - 如何在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
                }
            }
        }
)

所以我想实现两件事：

1. 能够缩放它实际被捏的位置（不是图像的中心）
2. 放大时，可以平移图像

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

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）