Android Compose How to scale and rotate an image by dragging border?

Question

I'm trying to make a photo editor that can be scale, rotate and drag to any place.
But I want to control the scale and rotate behavior via the corner rotate icon not by the image itself.
I know it must to be using pointerInput from the modifier, but not sure how to implement it.
Can anybody help with that and give some example?

How do you wish to control scale and translation? I'm building similar thing as you can see here, i'm scaling and translating via layout that contains Image. Rotation is tricky after translation especially even with rotation matrix. When i complete it i will add an answer that explains step step how to do it. — Thracian, Jul 05 '22 at 12:49
Does this answer helps you? https://stackoverflow.com/questions/66005066/android-jetpack-compose-how-to-zoom-a-image-in-a-box/66027497#66027497 — nglauber, Jul 05 '22 at 14:38
Hi! I attached the gif that shows what I'm expected! Thanks, I'll check it out your sample code! — Claire, Jul 05 '22 at 14:38
Simplest way of doing this is have a Box and align buttons to corners and your Image to center. Scaling is more complex, you can consider changing width and height. It's easier than scaling. Since you change dimension, or scale if you wish scale from top left, you also need to translate on scaling to match position of button. Scale is applied from center goes both directions. Increasing width or height goes from right to left so while you increase width and height your Composable grows right while you drag your button to left. This has many layers and not few lines of code. I will update it — Thracian, Jul 05 '22 at 15:07
By changing width and height i'm not sure buy you still need to calculate rotated translation based on current rotation of your Composable. I'm actually stuck in rotation step with my Composable. I will add required layers probably tomorrow, maybe other than rotation step — Thracian, Jul 05 '22 at 15:08
In my first comment link seems not to be available. What i do there is simple i get layout lower it's bounds if Modifier uses a fixed size and add an overlay for handles to be able to click even out of content's borders. Above i suggested buttons in a box because using a overlay makes it even more complicated. https://stackoverflow.com/questions/72802650/is-there-a-way-to-increase-a-composable-size-by-chaining-with-another-modifier — Thracian, Jul 05 '22 at 15:15
`.pointerInput(Unit) { detectDragGestures { change, dragAmount -> stickerWidth = maxOf(150, minOf(700, stickerWidth + dragAmount.x.toInt())) } }` — Claire, Jul 06 '22 at 07:14
`.width(with(LocalDensity.current) { stickerWidth.toDp() }) .wrapContentHeight()` — Claire, Jul 06 '22 at 07:15

score 1 · Answer 1 · answered Jan 23 '23 at 12:42

From example here: Android Touch System Gesture-Handling Modifiers in Jetpack Compose

@Composable
fun TransformableDemo() {
    var scale by remember { mutableStateOf(1f) }
    var rotation by remember { mutableStateOf(0f) }
    var offset by remember { mutableStateOf(Offset.Zero) }
    val state = rememberTransformableState { 
        zoomChange, offsetChange, rotationChange ->
            scale *= zoomChange
            rotation += rotationChange
            offset += offsetChange
    }

    Box(
        modifier = Modifier
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale,
                rotationZ = rotation,
                translationX = offset.x,
                translationY = offset.y
            )
            .transformable(state = state)
            .background(Color.Blue)
            .fillMaxSize()
    )
}

Android Compose How to scale and rotate an image by dragging border?

1 Answers1