How to position a button in the specified location of a image with offset

Issue

i'm trying to position the specified coordinates of the items in the shopping-list, in an image with a pointer Input. The Coordinates i calculate shouldn't be the problem, because they should always be in the picture according to their calculated coordinates

My problem is that the values of the pointer input always differ heavily from the values inside the foreach loop.

E.g.: In the Image where it's yellow marked, it says: "Offset: Offset(1046.9, 1067.9)" & in my Code i wrote that the button should be in: "offset(300.dp, 300.dp)" Image

So why do these two values differ so much from another and how can i fix it?

My Code:

Surface(
                modifier = Modifier
                    .fillMaxSize()
            )
            {
                Box(
                ) {
                    var offset by remember { mutableStateOf(Offset.Zero) }

                    Image(
                        bitmap = ImageBitmap.imageResource(R.drawable.kleinebitmaptestskizzeroterrand2),
                        modifier = Modifier
                            .fillMaxSize()
                           .verticalScroll(
                                state = vScrollState,
                                enabled = true,
                                reverseScrolling = true
                            )
                            .horizontalScroll(
                                state = hScrollState,
                                enabled = true,
                                reverseScrolling = true
                            )
                            .pointerInput(Unit)
                            {
                                detectTapGestures { motionEvent ->
                                    offset = motionEvent
                                    Log.i("==>Offset: ", offset.toString())
                                    }
                            }
                            .graphicsLayer(
                                scaleX = maxOf(1f, minOf(3f, scale.value)),
                                scaleY = maxOf(1f, minOf(3f, scale.value)),

                            ),
                        contentDescription = "Marktansicht"
                    ) 


                    shopping.forEach {
                            Button(
                            modifier = Modifier
                                 // this is what i used in the image below
                                .offset(300.dp, 300.dp)

                                // this is what i want to use but the button(-s) only "dissappear" when i uncomment 
                                // .offset(it.coordinates.x.dp, it.coordinates.y.dp)
                                .size(10.dp),

                            onClick = { /**/ }
                        )
                        {
                            Text(
                                modifier = Modifier
                                    .padding(
                                        top = ProjectTheme.paddings.tiny,
                                        bottom = ProjectTheme.paddings.tiny
                                    ),
                                style = ProjectTheme.typography.h6,
                                text = it.name
                            )
                        }
                  }
                }
         }

Solution

The offset you are getting from the pointer input (Offset(1046.9, 1067.9)) is in pixels, the one you are setting on button is in Dp.

Similarly, offset.x.dp then means 1046.9dp. To convert Px to Dp, you will have to use something like this instead: LocalDensity.current.run { offset.x.toDp() }.

In your scenario though, you will be better off with another variant of offset modifier which accepts lambda returning IntOffset, you can then do this:

Modifier.offset { pointerInputOffset.round() }

Answered By - Jan Bína