Zoomierbares Bild mit Markierbildern mithilfe von Android Compose ⇐ Android

[Anonymous]

Ich versuche, die folgende Verwendung von Jetpack komponieren zu implementieren: < /p>

Zeigen Sie ein Bild über eine Karte an < /li>
Fügen Sie einige Marker auf dieser Karte hinzu. /> < /ul>
Ich habe den folgenden Code dafür: < /p>

Code: Select all

@Composable
fun ZoomableImageWithMarkers(
imageUrl: String,
markers: List
>
) {
var scale by remember { mutableStateOf(1f) }
var offset by remember { mutableStateOf(Offset.Zero) }

Box(
modifier = Modifier
.fillMaxSize()
.pointerInput(Unit) {
detectTransformGestures { _, pan, zoom, _ ->
scale *= zoom
offset += pan
}
},
contentAlignment = Alignment.Center
) {
Image(
painter = rememberAsyncImagePainter(imageUrl),
contentDescription = null,
modifier = Modifier
.graphicsLayer(
scaleX = scale,
scaleY = scale,
translationX = offset.x,
translationY = offset.y
)
.fillMaxWidth()
)

markers.forEach { (normalizedX, normalizedY) ->
Image(
painter = painterResource(id = R.drawable.marker),
contentDescription = "Marker",
modifier = Modifier
.graphicsLayer(
//                        scaleX = scale, // If this is here, markers scale along with the image and stick to their place
//                        scaleY = scale,
translationX = offset.x,
translationY = offset.y
)
.offset(
x = (normalizedX * 100).dp,
y = (normalizedY * 100).dp
)
.size(24.dp)
)
}
}
}
< /code>
Und ich nenne es so: < /p>
val exampleMarkers = listOf(
Pair(0.3f, 0.5f),  // 30% X, 50% Y (relative to image size)
)

Wenn ich die Marker zusammen mit der Karte skalieren lasse, funktioniert es einwandfrei, aber wenn ich es nicht tue, passiert das folgende Problem:

. Zoomen, unten, wenn ich ausgehe. Soweit ich sehen kann, hält es seine Position relativ zu meinen Zoomen -Fingern, aber ich brauche es, um seine Position relativ zur Karte zu halten.