如何在Jetpack Compose中实现旋转矩形图片后自动重新缩放？

问题概述 #

应用支持拍摄横竖方向照片，提供图片旋转功能，但旋转后图片边缘出现裁切，翻页时可见图片超出屏幕范围。

现有代码 #

val rotationAnim by animateFloatAsState(
    targetValue = viewModel.slides[page].rotation.value.toFloat(),
    animationSpec = tween(durationMillis = 200, easing = FastOutLinearInEasing)
)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    ImageZoomView(
        modifier = Modifier
            .rotate(rotationAnim)
            .weight(1f),
        bitmap = bmp,
        zoomable = viewModel.zoomable.value
    )
}

已尝试的无效方法 #

• 将weight设置为可变状态，在rotation变化时重新赋值
• 将rotate移至父Column中
• 取消动画
• 硬编码旋转90度加载，问题仍存在

解决方案 #

问题根源在于Compose的rotate是绘制阶段变换，不会影响布局测量逻辑。weight(1f)仅基于旋转前的图片尺寸计算缩放比例，旋转后图片实际占用空间超出容器范围，导致裁切。需在布局阶段就计算旋转后的尺寸，让容器适配旋转后的图片大小。

方法1：自定义Layout Modifier处理旋转布局 #

创建自定义Modifier，在测量阶段计算旋转后的宽高，确保容器能容纳旋转后的图片：

import kotlin.math.abs
import kotlin.math.cos
import kotlin.math.sin

fun Modifier.rotateWithLayout(rotation: Float) = layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    // 计算旋转后的实际宽高
    val angleRadians = rotation * Math.PI / 180
    val rotatedWidth = (placeable.width * abs(cos(angleRadians)) + placeable.height * abs(sin(angleRadians))).toInt()
    val rotatedHeight = (placeable.width * abs(sin(angleRadians)) + placeable.height * abs(cos(angleRadians))).toInt()
    
    layout(rotatedWidth, rotatedHeight) {
        // 将图片居中放置
        placeable.place(
            x = (rotatedWidth - placeable.width) / 2,
            y = (rotatedHeight - placeable.height) / 2,
            rotation = rotation
        )
    }
}

修改原有代码，使用自定义Modifier替代默认rotate：

val rotationAnim by animateFloatAsState(
    targetValue = viewModel.slides[page].rotation.value.toFloat(),
    animationSpec = tween(durationMillis = 200, easing = FastOutLinearInEasing)
)

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center,
    horizontalAlignment = Alignment.CenterHorizontally
) {
    ImageZoomView(
        modifier = Modifier
            .weight(1f)
            .rotateWithLayout(rotationAnim), // 替换原有rotate
        bitmap = bmp,
        zoomable = viewModel.zoomable.value,
        contentScale = ContentScale.Fit // 确保图片完整显示
    )
}

方法2：调整容器与缩放逻辑 #

改用Box作为容器，配合animateContentSize让容器自适应旋转后的尺寸，同时确保图片按比例适配屏幕：

val rotationAnim by animateFloatAsState(
    targetValue = viewModel.slides[page].rotation.value.toFloat(),
    animationSpec = tween(durationMillis = 200, easing = FastOutLinearInEasing)
)

Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    ImageZoomView(
        modifier = Modifier
            .animateContentSize()
            .rotate(rotationAnim)
            .fillMaxSize(0.9f), // 留边避免完全贴屏
        bitmap = bmp,
        zoomable = viewModel.zoomable.value,
        contentScale = ContentScale.Fit
    )
}

关键说明 #

• 必须确保ImageZoomView内部的Image组件使用contentScale = ContentScale.Fit，保证图片旋转后完整显示。
• 自定义rotateWithLayoutModifier从根源解决了布局测量与绘制变换不匹配的问题，是更可靠的方案。

内容的提问来源于stack exchange，提问作者Nelson