Jetpack Compose Canvas drawPath 不起作用

Nick 发表于 Dev

缺口

我有這個可組合的，它應該允許使用指向畫布的指針進行繪製，但是當我移動指針時什麼也沒有發生

@ExperimentalComposeUiApi
@Composable
fun CanvasDraw() {
    val path = remember { Path() }

    Canvas(modifier = Modifier
        .fillMaxSize()
        .pointerInteropFilter {
            when (it.action) {
                MotionEvent.ACTION_DOWN -> {
                    path.moveTo(it.x, it.y)
                }
                MotionEvent.ACTION_MOVE -> {
                    path.lineTo(it.x, it.y)
                }
                else -> false
            }
            true
        }) {
        drawPath(
            path = path,
            color = Color.Blue,
            style = Stroke(10f)
        )
    }
}

菲利普·杜霍夫

remember { Path() }正在為下一次重組緩存 lambda 內容值，但當此對像上的內容髮生更改時，它無法觸發重組。要創建一些狀態，這將觸發 Compose 中更改的重新組合，您需要使用某種可變狀態 - 這是為 Compose 製作的新事物。

您可以在文檔中的 Compose 中找到有關狀態的更多信息，包括解釋基本原理的這個 youtube 視頻。

裡面的存儲點Path不會乾淨，因為它不是基本類型。相反，我使用的是可變狀態點列表，如下所示：

val points = remember { mutableStateListOf<Offset>() }

Canvas(modifier = Modifier
    .fillMaxSize()
    .pointerInput(Unit) {
        detectDragGestures { change, _ ->
            points.add(change.position)
        }
    }
) {
    drawPath(
        path = Path().apply {
            points.forEachIndexed { i, point ->
                if (i == 0) {
                    moveTo(point.x, point.y)
                } else {
                    lineTo(point.x, point.y)
                }
            }
        },
        color = Color.Blue,
        style = Stroke(10f)
    )
}