Zoomable Image ignores Box() dimension after upgrading Jetpack Compose

Viewed 40

After upgrading from compose 1.0.1 to 1.3.0-beta01 my Zoomable Image is ignoring the parent Box dimensions (250x250) I can even zoom it so large that It reaches over the TopAppBar…

enter image description here

I didn't changed anything on the code, just simply upgraded to the latest compose version.

Here my ZoomRotationImage Composable:

@Composable
private fun ZoomRotationImage(customImageUri: Uri) {

    var zoom by remember { mutableStateOf(1f) }
    var offset by remember { mutableStateOf(Offset.Zero) } 
    var angle by remember { mutableStateOf(0f) }

    val imageModifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTransformGestures(
                onGesture = { gestureCentroid, gesturePan, gestureZoom, gestureRotate ->
                    val oldScale = zoom
                    val newScale = zoom * gestureZoom
 
                    offset = (offset + gestureCentroid / oldScale).rotateBy(gestureRotate) -
                            (gestureCentroid / newScale + gesturePan / oldScale)
                    zoom = newScale.coerceIn(0.5f..5f)
                    angle += gestureRotate
 

                }
            )
        }
        .graphicsLayer {
            translationX = -offset.x * zoom
            translationY = -offset.y * zoom
            scaleX = zoom
            scaleY = zoom
            rotationZ = angle
            TransformOrigin(0f, 0f).also { transformOrigin = it }
        }

    //GlideImage(customImageUri, modifier = imageModifier, contentScale = ContentScale.Fit)
    AsyncImage(model = customImageUri, contentDescription ="", modifier = imageModifier, contentScale = ContentScale.Fit)


}

And here the Box:

Box(
            modifier = Modifier
                .height(250.dp)
                .width(250.dp)
        ) {


                ZoomRotationImage(screenState.customImageURI)
    
}
2 Answers

If you don't call Modifier.clipToBounds(), Modifier.clip() before Modifier.graphicsLayer{} or call clip = true inside Modifier.graphicsLayer{} your Composable's transformation won't be limited to its bounds. Same goes for drawing to Canvas or using Modifier.drawX modifiers either.

Use Modifier.clipToBounds() to limit your transformation to limit to bounds of composable to which it is assigned.

Related