Compose框架下单指拖拽旋转图片功能实现问题咨询

你现有代码跑不通是三个核心问题：

• 坐标取值逻辑错误：直接取change.position拿到的是旋转按钮控件内的局部坐标，旋转按钮本身会跟着图片转，参考系一直在变，算出来的夹角完全不准
• 角度计算方案冗余：用点积反余弦算夹角只能得到0-180度的无方向值，还要额外判断旋转方向，边界场景很容易出NaN、角度跳变
• 重复计算无效值：每次手势回调都重新计算图片中心点，既浪费性能，还容易因为布局测量时机不对拿到错误坐标

直接用atan2算向量角度是最稳定的方案，不需要迁移原生View那套复杂逻辑，完整可运行代码如下：

import androidx.compose.foundation.Image
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.matchParentSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.input.pointer.positionInRoot
import androidx.compose.ui.input.pointer.consume
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import kotlin.math.PI
import kotlin.math.atan2

data class PointF(val x: Float, val y: Float)

@Composable
fun SingleFingerRotatableImage(
    @DrawableRes imageRes: Int,
    modifier: Modifier = Modifier
) {
    // 当前旋转角度
    var rotateAngle by remember { mutableStateOf(0f) }
    // 图片控件全局中心坐标
    var imageCenter by remember { mutableStateOf(PointF(0f, 0f)) }
    // 上一次触点相对中心的角度
    var lastTouchAngle by remember { mutableStateOf(0f) }

    Box(
        modifier = modifier
            .graphicsLayer {
                rotationZ = rotateAngle
            }
            .onGloballyPositioned { coords ->
                // 仅在布局位置/尺寸变化时更新中心点坐标
                imageCenter = PointF(
                    x = coords.positionInRoot().x + coords.size.width / 2f,
                    y = coords.positionInRoot().y + coords.size.height / 2f
                )
            }
    ) {
        Image(
            painter = painterResource(id = imageRes),
            contentDescription = null,
            modifier = Modifier.matchParentSize()
        )
        // 旋转拖拽把手
        Icon(
            painter = painterResource(id = R.drawable.ic_rotate),
            contentDescription = null,
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .offset(y = 17.5.dp)
                .size(35.dp)
                .pointerInput(Unit) {
                    detectDragGestures(
                        onDragStart = { startOffset ->
                            // 拖拽开始时计算初始角度
                            val touchGlobalX = startOffset.x + this@pointerInput.positionInRoot().x
                            val touchGlobalY = startOffset.y + this@pointerInput.positionInRoot().y
                            lastTouchAngle = atan2(
                                touchGlobalY - imageCenter.y,
                                touchGlobalX - imageCenter.x
                            ) * 180f / PI.toFloat()
                        },
                        onDrag = { change, _ ->
                            change.consume()
                            // 转全局坐标算当前触点角度
                            val currentGlobalX = change.position.x + this@pointerInput.positionInRoot().x
                            val currentGlobalY = change.position.y + this@pointerInput.positionInRoot().y
                            val currentAngle = atan2(
                                currentGlobalY - imageCenter.y,
                                currentGlobalX - imageCenter.x
                            ) * 180f / PI.toFloat()
                            // 累加角度差
                            rotateAngle += currentAngle - lastTouchAngle
                            lastTouchAngle = currentAngle
                        }
                    )
                }
        )
    }
}

实现注意点：

• 必须把手势触点坐标转成根布局全局坐标再计算，保证参考系固定，不会因为控件旋转导致坐标错乱
• 用atan2(y, x)直接计算向量和x轴的夹角，自带正负方向（顺时针/逆时针），不需要额外判断方向，也不会出现反余弦计算的NaN问题
• 中心点坐标只需要在onGloballyPositioned回调里更新，不要放在手势回调里重复计算
• 手势回调里记得调用change.consume()消费事件，避免和父布局/下层控件的手势冲突

如果要同时实现单指缩放、拖拽，逻辑完全一致，只需要新增对应状态值，在拖拽回调里计算缩放比例、位移增量累加到状态上，再赋值给graphicsLayer的对应参数即可。

内容的提问来源于stack exchange，提问作者Med Hadi Hassine