如何在Jetpack Compose中将矩形移动到画布上？

Question

我有一个带有矩形的画布，我想让它能够移动。使用 Composable，我知道如何使用拖动修饰符，就像这里描述的那样：https://developer.android.com/jetpack/compose/gestures#dragging

但是我的画布矩形没有修饰符：

Canvas(modifier = Modifier.fillMaxSize()) {
        drawRect(Color.Blue, topLeft = Offset(0f, 0f), size = Size(this.size.width, 55f))

那么我该如何拖动它呢？使用Compose有什么方法，还是最好使用本地画布的本地方式？

- Code Poet

Answer 1

在 1.0.0-beta04 版本中，您可以使用 Canvas 中的 pointerInput 修饰符通过 detectDragGestures 函数来控制拖动手势，并保存 Offset 并将其应用于 drawRect 中的 topLeft 参数。

var offsetX by remember { mutableStateOf(0f) }
var offsetY by remember { mutableStateOf(0f) }

Canvas(modifier = Modifier.fillMaxSize()
        .pointerInput(Unit) {
            detectDragGestures { change, dragAmount ->
                change.consumeAllChanges()
                offsetX += dragAmount.x
                offsetY += dragAmount.y
            }
        }
    ){
    val canvasQuadrantSize = size / 2F
    drawRect(
        topLeft = Offset(offsetX,offsetY),
        color = Color.Green,
        size = canvasQuadrantSize
    )
}

- Gabriele Mariotti