I'm currently developing an Android application for my old Instant Lab, whose official app is no longer maintained and available on my phone.

The goal of this application is to detect three touch points on the screen, draw a quadrilateral from these points, and display an image within that shape.

I've managed to retrieve the coordinates of the three touch points and draw the quadrilateral using Surface and GenericShape in Jetpack Compose:

val pointersCoordinates = PointersCoordinates(
  x1 = 196.0f,
  y1 = 400.0f,
  x2 = 943.0f,
  y2 = 422.8798f,
  x3 = 882.0f,
  y3 = 1616.0f
)

val exposureShape = GenericShape { _, _ ->
  moveTo(pointersCoordinates.xTopLeftZoom(), pointersCoordinates.yTopLeftZoom())
  lineTo(pointersCoordinates.xTopRightZoom(), pointersCoordinates.yTopRightZoom())
  lineTo(pointersCoordinates.xBottomRightZoom(), pointersCoordinates.yBottomRightZoom())
  lineTo(pointersCoordinates.xBottomLeftZoom(), pointersCoordinates.yBottomLeftZoom())
}

Surface(
  modifier = Modifier
    .background(Color-Blue),
  shape = exposureShape,
) {
  Image(
    modifier = Modifier
      .fillMaxSize()
      .scale(-1f, 1f),
    contentScale = ContentScale.Crop,
    bitmap = myBitmap?.asImageBitmap() ?: ImageBitmap(0, 0),
    contentDescription = "photo",
  )
}

The problem is that the image is not confined to the shape of the drawn quadrilateral. Instead, it seems to fill the entire screen, and due to contentScale = ContentScale.Crop, it's heavily zoomed in:

Here's the image I'm trying to display:

How can I correctly display the image within the shape of the Surface?