CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpacktranslate-animation
Claire
Claire

Reputation: 113

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

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?

enter image description here

This is what I excepted sample

Upvotes: 2

Views: 4157

Answers (1)

A.Grz
A.Grz

Reputation: 448

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

Upvotes: 2

Related Questions