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

sczxawaw 于 2023-05-05 发布在 Android

关注(0)|答案(3)|浏览(252)

我有一个图像合成，我希望用户能够放大到图像的一部分。例如，如果在图像的左下角收缩，则放大左下角区域而不是图像的中心。当放大时，如果一个手指可以在图像周围平移。
在我现在的代码中，我有缩放逻辑，但它默认为图像的中心，无论图像在哪里被捏，并且在放大时没有平移逻辑。

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.能够缩放实际被捏住的位置（而不是图像的中心）
1.放大时，能够在图像周围平移
我试过从其他堆栈溢出的答案实现多个解决方案，但他们似乎不工作。

android

来源：https://stackoverflow.com/questions/69386614/how-to-implement-zoom-and-pan-on-an-image-in-jetpack-compose

3条答案

按热度按时间

mspsb9vt1#

目前还无法使用compose实现这一点。
但是我建议你使用AndroidView composable与TouchImageView或类似的设备进行互操作。

赞(0）回复(0）举报 2023-05-05

hfsqlsce2#

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

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）

赞(0）回复(0）举报 2023-05-05

vsaztqbk3#

罗伯托·莱纳尔迪的回答有一点变化。我在代码中设置了一个限制，以便图像不会超出容器。

@Composable
fun TouchImageView() {
    var zoom by remember { mutableStateOf(1f) }
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    val minScale = 0.5f
    val maxScale = 2f

    Image(
        painter = painterResource(id = R.drawable.info_1),
        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) {
                            val maxOffsetX = 197.82568f \\chnange this to according to your image size
                            val maxOffsetY = 197.82568f
                            offsetX += pan.x * zoom
                            offsetY += pan.y * zoom
                            offsetX = offsetX.coerceIn(-maxOffsetX, maxOffsetX)
                            offsetY = offsetY.coerceIn(-maxOffsetY, maxOffsetY)
                        } else {
                            offsetX = 0f
                            offsetY = 0f
                        }
                    }
                )
            }
            .fillMaxSize()
    )
}

赞(0）回复(0）举报 2023-05-05

我来回答

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

3条答案

相关问题

热门标签

最新问答