Hello! Using `detectTapGestures` how can i disallo...

# compose

[Daniel Candeias]

Hello!
Using detectTapGestures how can i disallow user to pan/translate the content out of its bounding box?
I have scale working with translations as well but the user is able to translate the image out of the screen. How can I set some limits for translation?

[Daniel Candeias]

Starting point code:

@Composable
fun ZoomableImage(
    modifier: Modifier = Modifier,
    imageUrl: String
) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(Color.Red)
    ) {
        val scale = remember { mutableStateOf(1f) }
        val translationX = remember { mutableStateOf(1f) }
        val translationY = remember { mutableStateOf(1f) }

        val painter =
            rememberCoilPainter(imageLoader = LocalContext.current.imageLoader, request = imageUrl)

        Box(
            modifier = Modifier
                .clip(RectangleShape)
                .fillMaxSize()
                .background(Color.Yellow)
                .pointerInput(Unit) {
                    detectTransformGestures(true) { centroid, pan, zoom, rotation ->
                        scale.value *= zoom
                        translationX.value += pan.x
                        translationY.value += pan.y
                    }
                }
                .graphicsLayer(
                    // adding some zoom limits (min 100%, max 250%)
                    scaleX = maxOf(1f, minOf(2.5f, scale.value)),
                    scaleY = maxOf(1f, minOf(2.5f, scale.value)),
                    translationX = translationX.value,
                    translationY = translationY.value
                ),
            contentAlignment = Alignment.Center
        ) {
            Image(
                painter = painter,
                contentDescription = null,
                modifier = Modifier
                    .aspectRatio(16 / 9f)
                    .align(Alignment.Center),
                contentScale = ContentScale.Crop
            )
        }
    }
}

[Ravi]

u able to find solution?

[Tornike Kikalishvili]

same problem here. Cannot find correct way to set limits for panning

[Tornike Kikalishvili]

@Daniel Candeias, I am also searching for answer for the same question, but I can give you suggestion regarding zooming, that code does not zoom exactly where user pinches, this might help you.

modifier = Modifier
    .layoutId("image")
    .scale(maxOf(1f, scale))
    .absoluteOffset {
        IntOffset(offsetX.roundToInt(), offsetY.roundToInt())
    }
    .pointerInput(Unit) {
        detectTransformGestures(
            onGesture = { _, pan, gestureZoom, _ ->
                scale *= gestureZoom
                offsetX += pan.x
                offsetY += pan.y
            }
        )
    }
    .fillMaxSize()
    .border(2.dp, Color.Red, RectangleShape),

[julioromano]

Did you find a solution eventually?