画布中交互式线条的奇怪行为

Question

我创建了一条交互式线路，但这可能无关紧要。即使没有交互，这也会产生意想不到的结果：-

@Composable
fun PowerClock() {
    var dynamicAngle by remember { mutableStateOf(90f.toRadians()) }
    val angle by animateFloatAsState(targetValue = dynamicAngle)
    Canvas(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .pointerInput(Unit) { //Irrelevent, the results go wrong even without invoking this at all
                coroutineScope {

                    while (true) {
//                        val touchDownPointerId = awaitPointerEventScope { awaitFirstDown().id }
                        detectDragGestures { _, dragAmount ->
                            dynamicAngle += atan(dragAmount.x / dragAmount.y)
                        }
                    }
                }
            }
    ) {
        val length = 500
        val path = Path().apply {
            moveTo(size.width / 2, size.height / 2)
            relativeLineTo(length * cos(angle), length * sin(angle))
        }

        drawPath(path, Color.Blue, style = Stroke(10f))
    }
}

这是一个预览，

Cavnas 描绘的一个有趣的行为是，看看我的实现，角度应该根据x 和y 的变化而变化，对吧？但实际上， y 被忽略了。我已经测试过了。

这是Cavnas 中的错误还是我执行错误？

Answer 1

我已关注this answer 并采用了 Compose 代码：

var touchPosition by remember { mutableStateOf(Offset.Zero) }
Canvas(
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .pointerInput(Unit) { //Irrelevent, the results go wrong even without invoking this at all
            while (true) {
                detectDragGestures { change, _ ->
                    touchPosition = change.position
                }
            }
        }
) {
    val rect = Rect(Offset.Zero, size)
    val length = 500
    val path = Path().apply {
        moveTo(rect.center.x, rect.center.y)
        val angle = (touchPosition - rect.center).let { atan2(it.y, it.x) }
        relativeLineTo(length * cos(angle), length * sin(angle))
    }

    drawPath(path, Color.Blue, style = Stroke(10f))
}

结果：