Canvas 中 Interactive Line 的奇怪行为

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

我已经关注并采用代码来编写：

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))
}

结果：

Canvas 中 Interactive Line 的奇怪行为

Weird behaviour from Interactive Line in Cavnas

android

canvas

kotlin

android-jetpack-compose

android-jetpack-compose-modifier