CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composeandroid-jetpack-compose-material3
sql
sql

Reputation: 1

Rotate image within ImageView, not entire image

I'm working on an image editing application. I'm facing an issue with rotating the image. I want to rotate the image within an ImageView, but with Jetpack Compose, I can only rotate the entire image. I need something similar to what's shown in the video below.

text

@Composable
fun TransformableDemo() {
    val infiniteTransition = rememberInfiniteTransition()
    val angle by infiniteTransition.animateFloat(
        initialValue = 0F,
        targetValue = 360F,
        animationSpec = infiniteRepeatable(
            animation = tween(2000, easing = LinearEasing)
        )
    )
    Image(
        painter = painterResource(R.drawable.khodam),
        "image",
        Modifier
            .fillMaxSize()
            .rotate(angle),
        contentScale = ContentScale.Fit
    )
}

Upvotes: 0

Views: 34

Answers (1)

tyg
tyg

Reputation: 15763

If you apply the clip() Modifier then the original shape is kept intact while just rotating the content:

Image(
    painter = painterResource(R.drawable.khodam),
    contentDescription = "image",
    modifier = Modifier
        .clip(RectangleShape)
        .fillMaxSize()
        .rotate(angle),
    contentScale = ContentScale.Fit,
)

The modifier order is important, so make sure to apply clip before rotate.

It might make things easier if you wrap your Image in a Box and apply clip there along with a specific size (not fillMaxSize()).

Upvotes: 0

Related Questions