title: Android Jetpack Compose: how to zoom a image in a "box"?
body: <p>I am going to build a zoomable image view inside a box, like the first screenshot. But when I zoom in on the image, it will go out of the box. Is there a way to zoom the image, but keep the size? Without <code>view</code> or <code>fragment</code>, only <code>box</code> seems not enough. I am expecting the image to get bigger, but still stay inside the red box, but I got the second screenshot after zooming in.</p>
  <p><a href="https://i.stack.imgur.com/KVrKp.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/KVrKp.jpg" alt="Before zoom in" /></a>
  <a href="https://i.stack.imgur.com/hOFG0.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hOFG0.png" alt="After zoom in" /></a></p>
  <p>Thanks to nglauber and Amirhosein, I got the final solution with having the zooming and dragging features at the same time inside a &quot;box&quot;(fixed area) with the following code as the new screenshot as shown below.</p>
  <pre><code>        val imageBitmap = imageResource(id = R.drawable.android)
          Image(
              modifier = Modifier
                  .preferredSize(400.dp, 300.dp)
                  .clip(RectangleShape)
                  .zoomable(onZoomDelta = { scale.value *= it })
                  .rawDragGestureFilter(
                      object : DragObserver {
                          override fun onDrag(dragDistance: Offset): Offset {
                              translate.value = translate.value.plus(dragDistance)
                              return super.onDrag(dragDistance)
                          }
                      })
                  .graphicsLayer(
                      scaleX = scale.value,
                      scaleY = scale.value,
                      translationX = translate.value.x,
                      translationY = translate.value.y
                  ),
              contentDescription = null,
              bitmap = imageBitmap
          )
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HGlUB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HGlUB.png" alt="enter image description here" /></a></p>