Android Composable 相对于父布局的位置 (X,Y)

Question

Android Composable 相对于父布局的位置 (X,Y)

5

我创建了一个Canvas组合，可以让我在父组合（Canvas）的范围内拖动和缩放子组合。

当子组合被拖动或缩放时，我需要知道它相对于其父组合（Canvas）的位置。

GridCanvas(
    ratio = canvasRatio,
) { gridWidth, gridHeight ->

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

    RenderedImage(
        modifier = Modifier
            .pointerInput(Unit) {
                detectTransformGestures { _, pan, zoom, _ ->
                    val futureScale = scale * zoom

                    if (futureScale in MIN_SCALE_FACTOR..MAX_SCALE_FACTOR) {
                        scale = futureScale
                    }

                    offsetX += pan.x
                    offsetY += pan.y
                }
            }
            .graphicsLayer {
                this.scaleX = scale
                this.scaleY = scale
                this.translationX = offsetX
                this.translationY = offsetY
            },
        imageUri = someUri,
    )
}

如何获取子级RenderedImage相对于其父级的X和Y位置？

- TareK Khoury

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thracian · Accepted Answer

您可以从 Modifier.onGloballyPosition{ it.positionInParent()} 获取它，并且如果需要，也可以在根和窗口中获取位置。此方法返回您的组合位置相对于父级的位置。

与View中的onTouchEvent不同，pointerInputChange事件从(0,0)开始，而onTouchEvents使用视图在窗口中的全局位置。当您位于Composable Offset的左上角时，返回的偏移量为(0,0)。

如果您想获取组合内部的触摸位置，则可以使用第一个参数centroid，它返回指针中心的位置。如果您有一个指针按下，它就是指针的触摸位置，当您有2、3或更多指针按下时，它就是指针中心相对于Composble开始按下的位置。如果您还要添加组合在父元素中的初始位置，则可以获得那个点。

假设您有一个如下所示的组合

Column(
    modifier = Modifier.fillMaxSize()
) {
    Box(modifier = Modifier.fillMaxWidth().height(100.dp).background(Color.Red))
    Column(modifier = Modifier.fillMaxWidth()) {
        Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(Color.Yellow))
        MyComposable()
    }
}

你需要协调的是 MyComposable 组件。

@Composable
private fun MyComposable() {


    var text by remember { mutableStateOf("") }
    Column(modifier = Modifier
        .fillMaxWidth()
        .height(300.dp)
        .border(2.dp, Color.Red)
        .onGloballyPositioned {
            val positionInParent: Offset = it.positionInParent()
            val positionInRoot: Offset = it.positionInRoot()
            val positionInWindow: Offset = it.positionInWindow()
            text =
                "positionInParent: $positionInParent\n" +
                        "positionInRoot: $positionInRoot\n" +
                        "positionInWindow: $positionInWindow"
        }
    ) {
        Text(text = text)
    }
}