如何正确拖动圆圈周围的视图？答案

【问题标题】：How to correctly drag the view around the circle?如何正确拖动圆圈周围的视图？
【发布时间】：2022-08-17 17:42:33
【问题描述】：

我希望绿点在圆形路径中跟随触摸点，但它似乎做得不对。

似乎某处有一个不需要的偏移量，但我在很长一段时间内都无法自己找到它。

这是我的代码：

@Preview
@Composable
fun Test() {
    val touchPoint = remember { mutableStateOf(Offset.Zero) }

    Scaffold {
        Column() {
            Box(Modifier.height(100.dp).fillMaxWidth().background(Color.Blue))
            Layout(
                modifier = Modifier.aspectRatio(1f).fillMaxSize(),
                content = {
                    Box(
                        Modifier
                            .size(48.dp)
                            .clip(CircleShape)
                            .background(Color.Green)
                            .pointerInput(Unit) {
                                detectDragGestures(
                                    onDrag = { change, dragAmount ->
                                        change.consumeAllChanges()
                                        touchPoint.value += dragAmount
                                    }
                                )
                            }
                    )
                }
            ) { measurables, constraints ->
                val dot = measurables.first().measure(constraints.copy(minHeight = 0, minWidth = 0))

                val width = constraints.maxWidth
                val height = constraints.maxHeight

                val centerX = width / 2
                val centerY = height / 2
                val lengthFromCenter = width / 2 - dot.width / 2

                val touchX = touchPoint.value.x
                val touchY = touchPoint.value.y

                layout(width, height) {
                    // I planned to achieve the desired behaviour with the following steps:

                    // 1. Convert cartesian coordinates to polar ones
                    val r = sqrt(touchX.pow(2) + touchY.pow(2))
                    val angle = atan2(touchY.toDouble(), touchX.toDouble())

                    // 2. Use fixed polar radius
                    val rFixed = lengthFromCenter
                    
                    // 3. Convert it back to cartesian coordinates
                    val x = rFixed * cos(angle)
                    val y = rFixed * sin(angle)
                    
                    // 4. Layout on screen
                    dot.place(
                        x = (x + centerX - dot.width / 2).roundToInt(),
                        y = (y + centerY - dot.height / 2).roundToInt()
                    )
                }
            }
            Box(Modifier.fillMaxSize().background(Color.Blue))
        }
    }
}

我肯定错过了一些东西，但不知道到底是什么。我究竟做错了什么？

标签： android-jetpack-compose drag

【解决方案1】：

touchPoint.value += dragAmount

在pixel 值中，并且您正在使用pixel 值更新dot 的位置，它需要dp 值。如果你用

private fun Float.pxToDp(context: Context): Dp = // Float or Int, depends on the value you have, or Double
    (this / context.resources.displayMetrics.density).dp

它将被移动的量会更小，并反映用户所做的拖动

【讨论】：