Zoomable Image ignores Box() dimension after upgrading Jetpack Compose

Question

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…

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)
    
}

May i ask where you get this rotation code and that color picker? — Thracian, Sep 08 '22 at 14:50
@Thracian I think from this repository: https://github.com/SmartToolFactory/Jetpack-Compose-Tutorials — HavanaSun, Sep 08 '22 at 15:00
You should use color picker here. https://github.com/SmartToolFactory/Compose-Color-Picker-Bundle The one in tutorial is obsolete. I wasn't able to figure out how to draw diamond shape correctly when i put it there.https://stackoverflow.com/questions/71423294/how-to-create-hsl-saturation-and-lightness-change-gradient-or-brush-editor-with — Thracian, Sep 08 '22 at 15:01
@Thracian Thank you, for my use case the simple one is enough — HavanaSun, Sep 08 '22 at 15:04

score 0 · Accepted Answer · answered Sep 08 '22 at 14:52

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.

Nikhil Dupally · Answer 2 · 2022-09-09T12:25:12.173

0

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

edited Sep 09 '22 at 12:25

answered Sep 08 '22 at 14:55

Nikhil Dupally

753
1
4
12

1

You don' limit to parent's bounds. You limit to composable bounds that Modifier.clipToBounds is assigned to – Thracian Sep 08 '22 at 14:57

Zoomable Image ignores Box() dimension after upgrading Jetpack Compose

2 Answers2