android - 如何在 Jetpack Compose 中放大图像？

Question

如果有人可以提供帮助，可以在 jetpack compose 中像 Instagram 一样缩放图像

我想要这样的东西 https://drive.google.com/file/d/18a7SaPIoSObbvrmYxJ0GDhHXEETKpsEV/view?usp=drivesdk

Answer 1

1- 将比例保存为状态

var scale by remember { mutableStateOf(1f) }

2- 设置图像的比例以使用此状态。我建议使用 graphicsLayer 设置比例以最小化无效内容，并添加您想要的任何其他转换，如下所示

Image(
        ...,
        modifier = Modifier
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale
            )
    )

3- 使用 Modifier.pointerInput 检测并应用缩放效果。使用 PointerInputScope，您可以检测制表符和转换，即(缩放、旋转和平移)。例如，您可以添加以下内容来检测缩放手势并相应地修改比例。

modifier = Modifier
            .pointerInput(Unit) {
                detectTransformGestures { _, _, zoom, _ ->
                    scale = when {
                        scale < 0.5f -> 0.5f
                        scale > 3f -> 3f
                        else -> scale * zoom
                    }
                }
            }

detectTransformGestures 的其他参数是质心、平移和旋转。缩放转换不需要它们，但如果您尝试应用旋转和平移，则需要。

如果您想使用平移手势应用缩放，您可以使用detectTapGestures。这是一个例子。

modifier = Modifier
            .pointerInput(Unit) {
                detectTapGestures(
                    onDoubleTap = {
                        scale = when {
                            scale > 2f -> 1f
                            else -> 3f
                        }
                    }
                )
            }

这是一个使用 CoilImage 的完整示例。任何其他图像的实现应该相同

@Composable fun SamplePreview(imageUrl: String) {
var scale by remember { mutableStateOf(1f) }
Box {
    CoilImage(
        data = imageUrl,
        contentDescription = null,
        contentScale = ContentScale.FillWidth,
        modifier = Modifier
            .align(Alignment.Center)
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale
            )
            .pointerInput(Unit) {
                detectTransformGestures { _, _, zoom, _ ->
                    scale = when {
                        scale < 0.5f -> 0.5f
                        scale > 3f -> 3f
                        else -> scale * zoom
                    }
                }
            }
    ) {
        CircularProgressIndicator()
    }
}