如何在 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 的方法，还是只使用原生画布的原生方式更好？

Answer 1

有了1.0.0-beta04您可以使用pointerInput调节剂在Canvas通过控制拖动手势detectDragGestures功能并保存Offset，并在应用它topLeft的参数drawRect。

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