如何在 Jetpack Compose 中围绕 canvas 移动一个矩形？

Question

我有一个带有矩形的 canvas，我希望它能够四处移动。对于可组合项，我知道如何使用此处所述的拖动修饰符：https://developer.android.com/jetpack/compose/gestures#dragging

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

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

那我怎么拖动呢？有没有一种方法可以使用 Compose 还是只使用原生方式和原生 canvas?

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

如何在 Jetpack Compose 中围绕 canvas 移动一个矩形？

How to move a rectangle around a canvas in Jetpack Compose?

android

android-jetpack-compose